Pure JavaScript File Upload Example
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- Looking for a pure JavaScript file upload example? In this tutorial we demonstrate how to upload a file with JavaScript and HTML5 on the client side and a component on the Apache server that captures the JavaScript file upload and saves the file locally on the server. If you want to avoid jQuery or DOJO and upload files asynchronously to the server, this pure JavaScript file upload example tutorial is exactly what you're looking for.
You can find the code used in this example here:
www.theservers...
![[FULL EP.16] เซียนพาลุย "เผือก-ฟรอยด์" กรี๊ดลั่น จนปูหนี | เฮ็ดอย่างเซียนหรั่ง | One Playground](http://i.ytimg.com/vi/FsqUvwS3b-Y/mqdefault.jpg)
Can you give a link to all the code used?
Indeed. It's posted in the article that inspired this JavaScript File Upload Video over on TheServerSide:
www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/Ajax-JavaScript-file-upload-example
@@cameronmcnz Thank you
I've been looking for a code like this. Better copy the codes from the link, it didn't work for me at first but found out that i had typo errors. Thanks for sharing!
Happy to help! Happier that this still works 3 years after it was first published. 34K views? Might be worth updating this. Thanks for watching!
The alert on 4:49 is misleading. You should report success from ".then" of a promise.
Yeah, my use of the alert isn't semantically correct. I just wanted to give some quick visually feedback to the developer that things worked.
It doesn't work for me.. i am using the same server and all but it seems like the php file isn't being used at all because when i select the file and upload it it doesn't do anything. same code, same server...Any clue why is that?
Great, this is code example in Javascript and PHP that work, even pure Notepad. How to get filename, size of selected file, maybe an animated pure tag, again plus plus.
Great video!!
Glad I could help!
Thanks a lot man. You saved my time.
Thank You For This
Glad I could help!
Fantastic!
thanks for sharing!
Sharing is caring. Thanks for the kind words!
Thanks! I needed to add a simple upload to a "backend-less website". This did the trick effortlessly.
Awesome! File uploads are tricky at the best of times. Super-glad you got it working.
@@cameronmcnz BTW, I still need to handle subfolder assignment and subfolder creation (if not yet created). Can you point me in the right direction? Maybe you've made a related video or know of a good tutorial to follow.
Thanks again!
Not working for me i searched solution since a week to upload a file and i don't find anything
What's the issue?
It works. Thanks!
Can you give an example of how to handle multiple files?
as a beginning to know the purpose of your existence in this life..👇 .My friends, search for your life purpose, why are we here?? I advise you to watch this series th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Getting Error 405 Method not allowed warnings. Any fix for this?
I tried to do this on my older raspberry pi but I get the error "500 (Internal Server Error)"
its an older raspberry pi I saw on the chip 2011 so it could be its age
either way is there some workaround to this?
You're a better man than me. I'm not sure if I could get it working on a newer Raspberry Pi!
Hi friend, just going through this example... Pls correct me if I am wrong.. So if we want to upload a file using javascript Or jquery and using an ajax library, should there be definitely a backend code written to upload file to server.. Is it not possible only through front end???
Yes, 100% there must be some code running on the backend that expects the file to be uploaded and will then save the file on the server. In this example I believe I use PHP just because that's simple to set up on Apache. In this other video I use a Node.js library. People asked for JavaScript on both the frontend and backend so I put this together. But yes, a piece of HTML or JQuery on the client is not enough. Something on the server must be expecting the file. Here's the other upload video I did:
th-cam.com/video/qv5tKef6-8I/w-d-xo.html
@@cameronmcnz o my god thanks a lot friend.. Iam a stupid, trying to upload file just by using front end ajax and wondering why it is not working.. Your answer really helped me to feel confident now..
@@charmilakondayagunta584 So glad i could help. Have fun learning HTML and JavaScript!
Can that upload music file and video file?
If not, how can I do it.
Yup! Should work as long as you don't hit any size limitations. I think for really big files you can do multipart uploads.
I am really curious why you're using notepad ^_^?
It's all I could afford!
Just trying to keep the example as simple as possible.
close, but no cigar for me. I am struggling to get this file reader event thing to work (rather than using forms :p)
looks like I'm probably going to need to just use the forms.
You should make a video on how to automatically upload multiple files, that are same filetype to the cloud,
Imma do that. Been meaning to do that for a while!
@@cameronmcnz Cool Awesome
It does NOT work if you use BLOB or new File .... via javascript :(
I tried same code and it didn’t upload it just alerts file has been uploaded successfully, but nothing is in upload folder and there are no errors. Any advise.
I am testing with localhost xampp
I had a similar error, but it was my mistake. I had the PHP file in a "PHP" folder referencing a "uploads" folder which actually was "../uploads" due to my folder structure. Hope that helps.
I tried the same code but get Uncaught TypeError TypeError: Failed to fetch
You should make a video on how to edit .php script file with Google Web Designer.
it works but what about multiple files ??
That'll be the next video. But basically, use the mutli-file upload HTML element and handle a list of elements on the server.
thanks!
Glad I could help! I've got another video where the entire backend is JavaScript and Node. Sometimes people who want the JavaScript upload steps want everything in JavaScript, even the backend.
preciso mesmo é enviar múltiplos arquivos.
você tem esse vídeo aqui?
Hello, Is there a maximum file size limitation? I googled a lot but nothing helped... smaller files like pictures are working.
as a beginning to know the purpose of your existence in this life..👇 .My friends, search for your life purpose, why are we here?? I advise you to watch this series th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
thanks!!
So glad I could help. Have fun with JavaScript!
@@cameronmcnz will do, thanks again!
as a beginning to know the purpose of your existence in this life..👇 .My friends, search for your life purpose, why are we here?? I advise you to watch this series th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
nice
Hi. I've read that it's safe to keep the php scripts in apache root folder (eg var/www/html)as long as php libpache mod is enabled. But could you please tell me how to access php api on the same server? Still via http requests?
I mean to access from JavaScript (i wanna use React JS on front-end and php api on back end)
Got it working just fine Thanks Cameron... But the file size that will upload seems to max out at under 2Meg... Anyone able to upload a file bigger than 2Meg???
btw Apache 2.4
@@stephanieharvill4157 I'm not totally sure. 2 meg doesn't see that huge. Maybe an Apache setting? I know for really big files you're supposed to do a 'multipart upload'.
Title and description say pure javascript. I almost stopped watching when I saw the apache server, but stopped watching when I saw upload.php.
This is part of an HTML, JQuery and DOJO file upload set of articles. So the title fits in with the series and makes total sense in that context. The description also states that it's PHP on the backend on an Apache server. So there's no intention to mislead to get clicks. But, it seems like Google/TH-cam searches have promoted this to people looking for Node or JS on the backend, so there's a mismatch in searcher intent. I apologize for that but it's out of my control. I'd like to put in the description 'this is not for node.js or JS on the backend,' but I have a feeling adding those terms to the description will have Google/TH-cam incorrectly recommending it even more. I do apologize for the inconvenience.
you didn't really think you'd be able to write a file client-side, did you??
I tried with the same code and folder structure but did not worked.
Let's fix it! What server were you using? Apache server? Tomcat? Any errors?
Same issue
@@devanshusingh225 Apache server on the backend?
this aint pure js ur using php🤧
This is all client-side JS.
For client and serverside JavaScript, here's the article and video I did on it. Enjoy!
www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/JavaScript-Nodejs-File-Upload-Example-Ajax
Excuseme i want to upload an entire folder
as a beginning to know the purpose of your existence in this life..👇 .My friends, search for your life purpose, why are we here?? I advise you to watch this series th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
No sirve, no sube nada
*htm:*
Enviar
*js:* async function EnviarCertificados(){
let arquivo = document.getElementById('inputcertificados').files //pega a imagem
let formData = new FormData();
formData.append("inputcertificados", arquivo[0]); //id e o nome do arquivo
await fetch('/class/uploadCurriculo.php',
{method: "POST", //faz o envio pelo método POST
body: formData}
).then(
console.log("Enviado com sucesso") //caso seja enviado
).catch((erro)=>{
console.log(erro) //caso aconteça algum erro
});
}
*php:* $arquivosPermitidos = array("png", "jpg", "pdf", "gif", "doc", "docx");
$extensao = pathinfo($_FILES['inputcertificados']['name'], PATHINFO_EXTENSION);
if(in_array($extensao, $arquivosPermitidos)): //verifica se existe a extensão no array
$pasta = "../assets/uploadCurriculo/"; //pasta onde irá salvar
$temporario = $_FILES['inputcertificados']['tmp_name'];
$novoNome = uniqid().".$extensao";
if(move_uploaded_file($temporario, $pasta.$novoNome)):
$mensagem = "Upload feito com Sucesso!";
else:
$mensagem = "Erro, não foi possivel fazer o upload";
endif;
else:
$mensagem = "Formato inválido";
endif;
echo $mensagem;
If you want a text based step-by-step walk through of this JavaScript file upload tutorial I did a full write up on TheServerSide:
www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/Ajax-JavaScript-file-upload-example