Breaking News: Grepper is joining You.com. Read the official announcement!

uploading file with fetch

S4N705H answered on August 29, 2020 Popularity 10/10 Helpfulness 4/10

answer uploading file with fetch

related Using fetch to upload files

uploading file with fetch

Comment

// Select your input type file and store it in a variable
const input = document.getElementById('fileinput');

// This will upload the file after having read it
const upload = (file) => {
  fetch('http://www.example.net', { // Your POST endpoint
    method: 'POST',
    headers: {
      // Content-Type may need to be completely **omitted**
      // or you may need something
      "Content-Type": "You will perhaps need to define a content-type here"
    },
    body: file // This is your file object
  }).then(
    response => response.json() // if the response is a JSON object
  ).then(
    success => console.log(success) // Handle the success response object
  ).catch(
    error => console.log(error) // Handle the error response object
  );
};

// Event handler executed when a file is selected
const onSelectFile = () => upload(input.files[0]);

// Add a listener on your input
// It will be triggered when a file will be selected
input.addEventListener('change', onSelectFile, false);

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: fetch file javascript uploading

Link to this answer
Share Copy Link

Contributed on Aug 29 2020

S4N705H

0 Answers Avg Quality 2/10

Closely Related Answers

Using fetch to upload files

Comment

//fetch using a Request and a Headers objects
// uploading an image along with other POST data
//using jsonplaceholder for the data
//video tutorial https://youtu.be/JtKIcqZdLLM

const url = 'https://postman-echo.com/post';

document.addEventListener('DOMContentLoaded', init);

function init(){
    document.getElementById('btnSubmit').addEventListener('click', upload);
}

function upload(ev){
    ev.preventDefault();    //stop the form submitting

    //create any headers we want
    let h = new Headers();
    h.append('Accept', 'application/json'); //what we expect back
    //bundle the files and data we want to send to the server
    let fd = new FormData();
    fd.append('user-id', document.getElementById('user_id').value);
    
    let myFile = document.getElementById('avatar_img').files[0];
    fd.append('avatar', myFile, "avatar.png");
    // $_FILES['avatar']['file_name']  "avatar.png"
    let req = new Request(url, {
        method: 'POST',
        headers: h,
        mode: 'no-cors',
        body: fd
    });

    fetch(req)
        .then( (response)=>{
            document.getElementById('output').textContent = "Response received from server";
        })
        .catch( (err) =>{
            console.log('ERROR:', err.message);
        });
}

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: gist.github.com

Tags: fetch fetc

Link to this answer
Share Copy Link

Contributed on Jan 29 2022

Meandering Meerkat

0 Answers Avg Quality 2/10

uploading file with fetch

Contents

More Related Answers

uploading file with fetch

Closely Related Answers

Using fetch to upload files

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.