Upload Files with Fetch - JavaScript Tutorial

Поділитися
Вставка
  • Опубліковано 27 жов 2024

КОМЕНТАРІ • 72

  • @皓-b1m
    @皓-b1m 3 місяці тому

    best and simplest upload js script forever.

  • @HugoGuzmanC
    @HugoGuzmanC 4 роки тому +8

    Thank you for sharing your knowledge!

  • @VictorSantos-yb8ir
    @VictorSantos-yb8ir 2 роки тому +2

    Thank you very much, you helped me a lot

  • @romimaximus
    @romimaximus 5 років тому +3

    Very well explained

  • @kashanahmad8014
    @kashanahmad8014 4 роки тому +1

    thanks mate! You solved one heck of a headache for me!

  • @columbiantoad
    @columbiantoad 2 роки тому +1

    I want to use multiple files in my project. Would I just change the line "formData.append("inpFile", inpFile.files[0])" to "formData.append("inpFile", inpFile.files)"? Then on the PHP file, make a for loop which would go through the files indexes?
    $File = $_FILES['inpFile'];
    For example: $FileSize = filesize($File['name'][$i]); // $i = the index of the for loop.

  • @davidfont2596
    @davidfont2596 3 роки тому +1

    When I press the "upload file" button @6:00 I get "Uncaught ReferenceError: can't access lexical declaration 'formData' before initialization index.html:24EventListener.handleEvent*"

  • @reidliberato8917
    @reidliberato8917 2 роки тому

    this is so simple i actually feel like its cheating. Thanks for this

  • @raveg9413
    @raveg9413 4 роки тому +2

    it's not working... I write this code just same as you are and set same directory, but I can't received image file in upload, cause they didn't send.

  • @nigelpallatt
    @nigelpallatt 3 роки тому +5

    HTTP/1.1 405 Method Not allowed ???

    • @ManpreetSingh-cv4it
      @ManpreetSingh-cv4it 7 місяців тому

      Hey, i am getting the same issue, were you able to resolve it?

  • @MichaelShingo
    @MichaelShingo Рік тому

    I get a 500 Internal Server Error when I click submit and it doesn't upload the file to the folder :(

    • @MichaelShingo
      @MichaelShingo Рік тому

      No error now that I installed PHP from homebrew and told VScode where the PHP executables are...now still nothing in uploads, looks like my $_FILES array is null

  • @BillTheChill654
    @BillTheChill654 2 роки тому +2

    I copied this code exactly as written and got a 405 error. Any idea what the problem could be?

    • @Hamza_n
      @Hamza_n Рік тому

      Did you figure it out?

  • @atouchofa.d.d.5852
    @atouchofa.d.d.5852 2 роки тому

    Beautiful man

  • @gracialonignasiver6302
    @gracialonignasiver6302 3 роки тому +2

    This posts images perfectly, but does anyone else get a weird error where no other code will run inside the event besides the actual fetch post?

  • @AshwinSKumar
    @AshwinSKumar Рік тому +1

    How would you create it so that it automatically chooses a certain file type?

  • @shantanuchhailkar3437
    @shantanuchhailkar3437 2 роки тому

    Thanks man!! This really working and solved my issue in a minute.

  • @divinechukwu505
    @divinechukwu505 2 роки тому

    Thank You For This

  • @vishnuvardhan8686
    @vishnuvardhan8686 4 роки тому +2

    Hello! When I follow the same image not copied or saved or uploaded into destination folder.

  • @thebewerter5730
    @thebewerter5730 3 роки тому

    this helped me a lot, thanks for sharing! cheers!

  • @ikurennyi
    @ikurennyi 5 років тому +3

    Hello! May I ask you which VS Code them are you using in this video? Looks very nice!

    • @dcode-software
      @dcode-software  5 років тому +3

      I'm using Roboto Mono as the font and the theme is Min Dark.

  • @jasonlewis6805
    @jasonlewis6805 3 роки тому +1

    Great post, clear and to the point. Just what I needed!

  • @Cubas1111
    @Cubas1111 Рік тому

    Nice video! I'm working with Django and I get this error ""415 (Unsupported Media Type)"" I already googled as much as i can and tried different code but without success. Any advice please (?)

  • @TheIguana3d
    @TheIguana3d 4 роки тому

    Thanks man for the video!!!!

  • @mohamedshahrul1750
    @mohamedshahrul1750 Рік тому

    please answer this... how does file is sent to server without converting to base64? how does we send it in binary format? doesn't http only support text? thats why we convert it into base64 string format right? pleaseeee explain me...

  • @beyondcraziness8847
    @beyondcraziness8847 3 роки тому

    I want to upload a file to AWS S3 bucket... Can I pass the URL instead of upload.php file location... If not what else can I do can you please tell me?

  • @parabunx
    @parabunx 2 роки тому

    can we code the upload.php in JS ?? Because i code on shopify and shopify don't accept PHP....

  • @fredfromearth7263
    @fredfromearth7263 2 роки тому

    OK but then where is it the file on the server? cannot find it. Good question, right?

  • @goncalomarques7022
    @goncalomarques7022 3 роки тому +2

    bro i got 405 method not allowed can u give some help

    • @goncalomarques7022
      @goncalomarques7022 3 роки тому +1

      if someone is getting the same problem u just need to open it as a server and not as localhost ua-cam.com/video/ohkMRA74MB4/v-deo.html see that video use xamp and open 80 port and it should work

  • @trusabaka9747
    @trusabaka9747 Рік тому

    What about uploading BIG files? Making chunks, etc.?

  • @bjarnieinarsson3472
    @bjarnieinarsson3472 3 роки тому +2

    I would have at least mentioned the most important missing part.. the php file it self.

    • @dcode-software
      @dcode-software  3 роки тому +5

      Unfortunately not because this video is about the front end, using JavaScript. It will work for all server side technologies

  • @kirito6374
    @kirito6374 2 роки тому

    Which server are you using?

  • @caprioficial
    @caprioficial Рік тому

    thanks to you!

  • @okancingoz
    @okancingoz Рік тому

    How can i use that upload file path in javascript?

  • @Brunocriacoes
    @Brunocriacoes 3 роки тому

    good job :)

  • @paoro814
    @paoro814 3 роки тому

    will the php file run even with xammp or wampp server?

  • @sidnaesk295
    @sidnaesk295 2 роки тому

    Love you :-)

  • @dastgirakhtar9782
    @dastgirakhtar9782 Рік тому

    100 working 👏👏👏❤❤

  • @sandortudja2087
    @sandortudja2087 3 роки тому

    It is not working for me.
    I can check in the chrome developer tool the FormData is there as binary file
    But the selected picture do not in the uploads directory for some reason.
    Anyone have any idea what is the reason of this?

    • @sandortudja2087
      @sandortudja2087 3 роки тому

      Ok never mind I figured it out.
      There was some permission issue when the php file tried to write.

  • @dijiflex
    @dijiflex 4 роки тому

    So if i have the name attribute on on the input tag, does it mean i can now avoid using the formdata.append() ?

  • @ינוןאלבז-כ1ז
    @ינוןאלבז-כ1ז 3 роки тому

    thanks

  • @joseraimundofernandesfilho7570
    @joseraimundofernandesfilho7570 5 років тому +1

    Hello dcode I really liked ur video. May I ask you how can I make the code version of upload.php in nodejs?

    • @dcode-software
      @dcode-software  5 років тому +1

      You can use Express and Multer :)

    • @joseraimundofernandesfilho7570
      @joseraimundofernandesfilho7570 5 років тому

      ​@@dcode-software Hello dcode. I tried with angular + Express and connect-multiparty and its working but the file name is becoming a hash like: 2wrty267yw2.pdf. Do you know how can I fix that?

  • @woofelator
    @woofelator 4 роки тому

    I'm getting no errors, and no file is showing up in my uploads folder.

    • @ConsulthinkProgrammer
      @ConsulthinkProgrammer 3 роки тому

      Try an alternative with apps script
      ua-cam.com/video/m3Sc7nVLPP8/v-deo.html

  • @anthonymorell692
    @anthonymorell692 4 роки тому

    Has anyone implemented this with django backend? Everything follows along accordingly up until setting up the fetch procedure. I have problems 1.) getting the CSRF token and 2.) keep getting a 302 code. Any advice is greatly appreciated!

    • @ConsulthinkProgrammer
      @ConsulthinkProgrammer 3 роки тому

      Try an alternative with google apps script
      ua-cam.com/video/m3Sc7nVLPP8/v-deo.html

  • @juliolh06
    @juliolh06 Рік тому

    excelente

  • @mushfiqussalahin6930
    @mushfiqussalahin6930 4 роки тому

    I get 404. if u could guide me what am I doing wrong

  • @louisaldorio7251
    @louisaldorio7251 4 роки тому +2

    why we must use php again?

  • @webdev4786
    @webdev4786 3 роки тому

    perfect

  • @bikramchettri9405
    @bikramchettri9405 5 років тому

    Can you teach how to validate files using javascript?

  • @mohammedalzamil7191
    @mohammedalzamil7191 4 роки тому

    awesome

  • @AdriiPing
    @AdriiPing 4 роки тому

    Mine is getting error 400 : body must contain a valid content

    • @dcode-software
      @dcode-software  4 роки тому

      Try making sure your content type is correct