10 examples of 'axios file upload' in JavaScript

3
export default async function uploadFn(file) {
4
  const fd = new FormData();
5
  fd.append('file', file);
6
7
  return request(`/upload/file/api`, {
8
    method: 'POST',
9
    data: fd,
10
  });
11
}

109
upload(file) {
110
  const { checkFile, uploadFile } = this.props;
111
  if (checkFile !== noop && checkFile(file)) {
112
    const reader = new FileReader();
113
    reader.readAsDataURL(file, 'UTF-8');
114
    reader.addEventListener('load', () => {
115
      let fileStringBase64 = reader.result;
116
      fileStringBase64 = fileStringBase64.substring(
117
        fileStringBase64.indexOf(',') + 1,
118
        fileStringBase64.length
119
      );
120
      uploadFile(fileStringBase64, file);
121
    });
122
  }
123
}

76
function upload(files, filenames, form) {
77
	if (files && files.length) {
78
		var data = {
79
			folder : form.data('folder'),
80
			autorename : true,
81
			json : true
82
		};
83
		if (filenames && filenames.length) {
84
			data.filename = filenames;
85
		}
86
		return $.ajaxupload(files, ajaxOptions({
87
							url : CONTEXT_PATH + '/common/upload',
88
							name : 'file',
89
							data : data,
90
							dataType: 'json',
91
							success : function(data) {
92
								appendAttachments(form, data);
93
							}
94
						}));
95
	}
96
}

7
function uploadFiles($fileInputs, directUploadUrl) {
8
  let filesToUploadCntr = 0;
9
  let filesUploadedCntr = 0;
10
  let filesForUpload = [];
11
12
  $fileInputs.each(function(_, f) {
13
    let $f = $(f);
14
    if ($f.val()) {
15
      filesToUploadCntr += 1;
16
      filesForUpload.push($f);
17
    }
18
  });
19
20
  return new Promise((resolve, reject) => {
21
    if (filesToUploadCntr === 0) {
22
      resolve('done');
23
      return;
24
    }
25
26
    $(filesForUpload).each(function(_, $el) {
27
      let upload = new ActiveStorage.DirectUpload($el[0].files[0], directUploadUrl);
28
29
      upload.create(function(error, blob) {
30
        if (error) {
31
          reject(error);
32
        } else {
33
          $el
34
            .prev('.file-hidden-field-container')
35
            .html(``);
36
37
          filesUploadedCntr += 1;
38
          if (filesUploadedCntr === filesToUploadCntr) {
39
            resolve('done');
40
          }
41
        }
42
      });
43
      return true;
44
    });
45
  });
46
}

5
export function upload(file) {
6
  const body = new FormData()
7
  body.append('file', file)
8
  body.append('upload_preset', unsignedUploadPreset)
9
10
  return (
11
    fetch(cloudinaryUrl, {
12
      method: 'POST',
13
      body
14
    })
15
      .then(res => res.json()) // json-ify the readable strem
16
      .then(body => {
17
        // use the https:// url given by cloudinary; or eager property if using transformations
18
        const imageUrl = body.eager ? body.eager : body.secure_url
19
20
        // set the uploading status to false
21
22
        return imageUrl
23
      })
24
      // eslint-disable-next-line no-console
25
      .catch(err => console.log('err', err))
26
  )
27
}

76
function imageUpload(path, file) {
77
  var formData = new FormData()
78
  formData.append('image', file)
79
80
  var def = $.Deferred()
81
  $.ajax({
82
    url: path,
83
    type: 'POST',
84
    cache: false,
85
    processData: false,
86
    contentType: false,
87
    data: formData,
88
    success: function (response, status, xhr) {
89
      handleAjaxResponse(def, response, status, xhr)
90
    },
91
    error: function (err) {
92
      def.reject(err)
93
    }
94
  })
95
  return def.promise()
96
}

3
function uploadFile (file){
4
  return xhr('/api/media', {
5
    method: 'POST',
6
    body: file
7
  });
8
}

12
function upload (image) {
13
  return new Promise((resolve, reject) => {
14
    axios({
15
      method: 'POST',
16
      url: 'http://ava.com/api/imagemin',
17
      data: {
18
        data: image
19
      }
20
    }).then(response => {
21
      console.log(response)
22
      resolve('http://www.tianjin-air.com/style/gsair/img/news-banner.jpg')
23
    }).catch(err => {
24
      console.error(err)
25
      reject(err)
26
    })
27
  })
28
}

19
upload(file: File) {
20
  if (!file) { return; }
21
22
  // COULD HAVE WRITTEN:
23
  // return this.http.post('/upload/file', file, {
24
  //   reportProgress: true,
25
  //   observe: 'events'
26
  // }).pipe(
27
28
  // Create the request object that POSTs the file to an upload endpoint.
29
  // The `reportProgress` option tells HttpClient to listen and return
30
  // XHR progress events.
31
32
  const formData = new FormData();
33
  formData.append('picdata', file);
34
35
  const req = new HttpRequest('POST', this.UploadApiUrl, formData, {
36
    reportProgress: true
37
  });
38
39
  // The `HttpClient.request` API produces a raw event stream
40
  // which includes start (sent), progress, and response events.
41
  return this.http.request(req).pipe(
42
    map(event => this.getEventMessage(event, file)),
43
    tap(message => this.showProgress(message)),
44
    last(), // return last (completed) message to caller
45
    catchError(this.handleError(file))
46
  );
47
}

36
upload(file) {
37
  const url = this.action;
38
  const formData = new FormData();
39
  formData.append(file.name, file, file.name);
40
  this.http.post(url, formData);
41
}