You never even used the const inpfile so the file never gets passed through and actually uploaded. what would that line of code be? unless you passed it through the xhr.send(new FormData(uploadForm)) in that case it didnt work either. EDIT: Figured out that its this line of code: xhr.setRequestHeader("Content-Type", "multipart/form-data"); Removed it and works like a charm
Your content never disappoints! You are really good at explaining things and you do so in a really short amount of time. You deserve way more subscribers than you have now. You are definitely one of the most underrated web developer channels on youtube. I love your content. I hope you never stop making such amazing content!
A heads up for anyone who wants to use Laravel as the backend for this example (like I did). Do not use xhr.setContentHeader(), otherwise Laravel won't be able to get the file out of the request, instead, set the enctype in the form tag directly.
likewise there is either a problem with moz or shared hosting that messes up with the headers. I am using php and ajax and it was not working till i deleted that xhr.set...(). I did not add the headers to my form as well because then the form submit will want a method and form action that will result in the reload crap that occurs when you submit a form normally. I think the new browser updates have taken care of headers issue on when you call formdata()
If the Progress bar works but the file isn't uploading, its because you have to *remove* this line of code: *_xhr.setRequestHeader("Content-Type", "multipart/form-data");_* Please thumbs up so others that have the same problem can see the solution.
@@MasudRana-mn2xl yes but in this tutorial he says to add the line *_xhr.setRequestHeader("Content-Type", "multipart/form-data")_* in js which breaks the operation; Just removing it will do, but if you still need to set the content type then yes, you can do what you suggested.
Could I use this, or a similar script, if I only wanted to monitor the progress of an action on the remote server, like copying files from one location to another, is it even possible?
So if I understand your code correctly, you are monitoring the document for the file upload object to create your progress bar completion percentage. I can see the JavaScript having easy access to this object in the source page, but what if you have a PHP script on the backend which is an AJAX target and you want that script to return progress for thing's it's doing? I have wracked my brain for years trying to find a way to do this, but the closest thing I could muster is to use the AJAX callback when it completes to know to do an action on the calling page. I have a current script that has to send over 800 emails to our organization, and the only thing I can return for this AJAX invoked emailer is it's completion. Since the emailing takes quite a while, it always looks like the browser has crashed waiting on execution. I just have to create messages to 'please wait' and not to navigate away until the script completes. It would be so nice to have a means of returning progress for arbitrary backend script actions. Do you have any ideas on this?
I need show messages from upload.php, but with the progress bar script, this messages are hidden. Can you help me with this problem. I´m a noob with Ajax. Thanks!
Is there any way we can make this when the data come back from sever. Because it is working fine with submission of form but I want to create it when the data comes back from sever.
Why don't you use the tag to simplify the example. Example is understandable but it does not work for me, specially the enctype parameter. Source code link please.
Hi, Thanks a lot for your job. So I have a question. How do I do if I don't want use a select file ? I know the path file and it change everytime. I don't want users does a selection. Thanks.
This is not working for me. The file appears to be uploading via the chrome console, but the $_FILES variable is always NULL, so I cant grab the file on the receiving end. Any help is appreciated :) Here is my code... const uploadForm = document.getElementById("uploadForm"); const inpFile = document.getElementById("inpFile");
dear, i have the "upload.php" done inside the html and not as seperate file, now i cant do ajax.open("post", "upload.php") is there an alternative way to do this?
Hi, can anyone comment on using this method for large file uploads 25-50MB. I assume this is a synchronous process . Would async javascript file uploader be a better choice ? Thanks :)
@FREDDY JOHAN LOOR ALARCON can you explain please? i just sit for 30 minutes trying to solve the problem and i was ignoring your comment searching another advices, but exactly your advice helped me. xmlhttpcontent adds the header automatically?
@@dcode-software Wow, thank you for responding so quickly! I'd love to pick up any courses you may have to offer. I had more one question, what if I want to display a progress of a server task (written in Go with Vue front end -- which would spit JSON with a percentage that I can display on the page, but not sure how to poll it (long polling, vs. SSE). Thoughts?
@@dcode-software I think polling might be the easiest solution at 500 ms or so. WS would be a bit more work. Have you played with SSE? One way WS, kind of.
I couldn't access file in php code using $_FILES['file']['name'] because of an error of "Missing boundary in multipart/form-data POST data in Unknown on line 0" then after searching I found out you also need to set the boundary in setRequestHeader() method, for example : hr.setRequestHeader("Content-type","multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2)); otherwise all you need to do is remove the following line: xhr.setRequestHeader("Content-Type", "multipart/form-data"); I spent a lot of time finding the solution to the error so I thought of sharing my experience to help others in the future
Check out my video on creating your own custom file upload button:
ua-cam.com/video/T3PDgtliezo/v-deo.html
You never even used the const inpfile so the file never gets passed through and actually uploaded. what would that line of code be? unless you passed it through the xhr.send(new FormData(uploadForm)) in that case it didnt work either. EDIT: Figured out that its this line of code:
xhr.setRequestHeader("Content-Type", "multipart/form-data");
Removed it and works like a charm
I was looking for the actual progress bar tutorial for a very long time..finally got it...thanks!!
No probs mate 😁
The simplest and cleanest way! Thank you very much!
Your content never disappoints! You are really good at explaining things and you do so in a really short amount of time. You deserve way more subscribers than you have now. You are definitely one of the most underrated web developer channels on youtube. I love your content. I hope you never stop making such amazing content!
Appreciate that! Have a good day 😊
excellent - very clear and I like the way that you touch upon the 'why' not just the 'how'. Thanks.
A heads up for anyone who wants to use Laravel as the backend for this example (like I did). Do not use xhr.setContentHeader(), otherwise Laravel won't be able to get the file out of the request, instead, set the enctype in the form tag directly.
likewise there is either a problem with moz or shared hosting that messes up with the headers. I am using php and ajax and it was not working till i deleted that xhr.set...(). I did not add the headers to my form as well because then the form submit will want a method and form action that will result in the reload crap that occurs when you submit a form normally. I think the new browser updates have taken care of headers issue on when you call formdata()
the best i have come across so far great work done
Thanks mate!
If the Progress bar works but the file isn't uploading, its because you have to *remove* this line of code:
*_xhr.setRequestHeader("Content-Type", "multipart/form-data");_*
Please thumbs up so others that have the same problem can see the solution.
You can use this to solve your problem.
@@MasudRana-mn2xl yes but in this tutorial he says to add the line *_xhr.setRequestHeader("Content-Type", "multipart/form-data")_* in js which breaks the operation; Just removing it will do, but if you still need to set the content type then yes, you can do what you suggested.
thank you so much, very clear and easy to understand!!
Could I use this, or a similar script, if I only wanted to monitor the progress of an action on the remote server, like copying files from one location to another, is it even possible?
Can you make upload file multiple with progress bar and abort function?
mi barra se crece mas de lo norma y al seleccionar otro archivo no carga de nuevo, se queda en 100 que hago ??
So if I understand your code correctly, you are monitoring the document for the file upload object to create your progress bar completion percentage. I can see the JavaScript having easy access to this object in the source page, but what if you have a PHP script on the backend which is an AJAX target and you want that script to return progress for thing's it's doing? I have wracked my brain for years trying to find a way to do this, but the closest thing I could muster is to use the AJAX callback when it completes to know to do an action on the calling page.
I have a current script that has to send over 800 emails to our organization, and the only thing I can return for this AJAX invoked emailer is it's completion. Since the emailing takes quite a while, it always looks like the browser has crashed waiting on execution. I just have to create messages to 'please wait' and not to navigate away until the script completes. It would be so nice to have a means of returning progress for arbitrary backend script actions. Do you have any ideas on this?
Good day. What if the input file is multiple. Is the computation the same?
I need show messages from upload.php, but with the progress bar script, this messages are hidden. Can you help me with this problem. I´m a noob with Ajax. Thanks!
405 Method not allowed. This error is coming at the point where I mentioned the POST method. what could be the solution ?
Can you please make the same video using fetch api?
You are the man, thanks alot.
thx a lot =)
Is there any way we can make this when the data come back from sever. Because it is working fine with submission of form but I want to create it when the data comes back from sever.
Why don't you use the tag to simplify the example. Example is understandable but it does not work for me, specially the enctype parameter. Source code link please.
Hi, Thanks a lot for your job.
So I have a question. How do I do if I don't want use a select file ?
I know the path file and it change everytime. I don't want users does a selection.
Thanks.
This helps me a lot. Thank you!
that was amazing thanks a lot
what was `const inpFile` for, you didn't use it in the js
Thank you .. Work for me
Thank you, I learned a lot.
What library are you referencing for class="form"
he says it is merely aesthetic so it can be edited with css
Thanks a lot
Thank you so much!
Neat, is there a way to implement this using jQuery ajax ?
Always i get good experience
Awesome
Thank you so much
No probs mate
How to do the same with fetch, not with xhr?
Is this compatible with Fetch API?
This is not working for me. The file appears to be uploading via the chrome console, but the $_FILES variable is always NULL, so I cant grab the file on the receiving end.
Any help is appreciated :)
Here is my code...
const uploadForm = document.getElementById("uploadForm");
const inpFile = document.getElementById("inpFile");
uploadForm.addEventListener("submit", uploadFile);
function uploadFile(e) {
e.preventDefault();
const xhr = new XMLHttpRequest();
xhr.open("POST", "ul.php");
xhr.upload.addEventListener("progress", e => {
console.log(e);
});
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.send(new FormData(uploadForm));
}
Nice. Can you please show the same thing using jQuery Ajax?
dear, i have the "upload.php" done inside the html and not as seperate file, now i cant do ajax.open("post", "upload.php")
is there an alternative way to do this?
@Ketan Artist yes I have. Homemade solved
@Ketan Artist but doesn't show any php echo properties. But runs the codes as it should.
Hi, can anyone comment on using this method for large file uploads 25-50MB. I assume this is a synchronous process . Would async javascript file uploader be a better choice ? Thanks :)
Love it
need this one using asp.net mvc
Dom, please could you do this same tutorial with fetch API, thank you
Hey Curtis, yes that's definitely written down in my list of topics I want to cover - unfortunately Fetch doesn't make this as easy as AJAX :(
@@dcode-software maybe I should just switch my codes to ajax :( ,...thanks
Hi I can not find my upload picture in my uploads folder, can you help me?
Try checking the $_FILES array first to see if PHP has at least received your file, and then work from there
@FREDDY JOHAN LOOR ALARCON can you explain please? i just sit for 30 minutes trying to solve the problem and i was ignoring your comment searching another advices, but exactly your advice helped me. xmlhttpcontent adds the header automatically?
Wow i'ts cool tutorial..
Can this be done with fetch?
Yes but I believe it's very early standard, it might be safer to use something like Axios if you really need this functionality
@@dcode-software Wow, thank you for responding so quickly! I'd love to pick up any courses you may have to offer.
I had more one question, what if I want to display a progress of a server task (written in Go with Vue front end -- which would spit JSON with a percentage that I can display on the page, but not sure how to poll it (long polling, vs. SSE). Thoughts?
Hmm, I don't see why polling wouldn't work, but I think using something like WebSockets is ideal
@@dcode-software I think polling might be the easiest solution at 500 ms or so. WS would be a bit more work. Have you played with SSE? One way WS, kind of.
I haven't no 🙁
Hi dcode. where is the code for this video?
You can go through this repo github.com/Sasi-007/Files-sharing
cool tutorials but codes aren't available. Can we please get the codes with each video
phppot.com/downloads/jquery-ajax-image-upload-with-animating-progress-bar.zip
Nice
first , thank you so much for the video
i get a typeerror
the progressBarFill is null
wow
Definitely
Its working but it doesnt upload the files. Then?
You'll need to process the file upload on the server side
@@dcode-software Could you please tell What di you mean?
@@dcode-software My uploading is working perfectly. Once i use your script. the progress bar works well. but it does not upload anything
Are you using PHP?
@@dcode-software YEs
I couldn't access file in php code using $_FILES['file']['name']
because of an error of "Missing boundary in multipart/form-data POST data in Unknown on line 0"
then after searching I found out you also need to set the boundary in setRequestHeader() method,
for example :
hr.setRequestHeader("Content-type","multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2));
otherwise all you need to do is remove the following line:
xhr.setRequestHeader("Content-Type", "multipart/form-data");
I spent a lot of time finding the solution to the error so I thought of sharing my experience to help others in the future
Why you only have 29k subs..,?
Source Code sir?
Cool
best
Thank you so much