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

file upload without using form in vue js

iF n OnLy iF answered on July 19, 2022 Popularity 9/10 Helpfulness 5/10

answer file upload without using form in vue js

file upload without using form in vue js

Comment

//html
<div class="form-group">
  	<label>Attachment</label>
	<input type="file" id="import-file" name="file" class="form-control" ref="file" @change="onFileChange" multiple>
    <button type="button" class="btn btn-primary" v-on:click="submitPage">Submit</button>
</div>

//vue js methods
onFileChange(e){
    var self = this

    self.file = e.target.files ? self.$refs.file.files[0] : null;
    // var format_type = `${self.file.type || 'unknown'}`
},
submitPage(){
 	const formData = new FormData();
    formData.append('file', self.file);
    const headers = { 'Content-Type': 'multipart/form-data' };
  	
  	axios.post('/api/upload', formData, headers)
    .then(function(response){
      	console.log(response.data)
    })
    .catch(function (err) {
      console.log(err)
    })
}

//php using AWS s3
$file_extension = $request->file->getClientOriginalExtension();

//put file to folder name in s3 bucket
$file_upload = Storage::disk('s3')->put('/folder_name', $request->file);

//file url in s3
$file_path = Storage::disk('s3')->url($attach);

//env
AWS_ACCESS_KEY_ID=access_key
AWS_SECRET_ACCESS_KEY=secret_key
AWS_DEFAULT_REGION=region
AWS_BUCKET=bucket_name
AWS_USE_PATH_STYLE_ENDPOINT=false

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: file-upload javascript using

Link to this answer
Share Copy Link

Contributed on Jul 19 2022

iF n OnLy iF

0 Answers Avg Quality 2/10

file upload without using form in vue js

Contents

More Related Answers

file upload without using form in vue js

Grepper

Documentation

Social

Legal

Contact

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