handling input file type upload

iF n OnLy iF answered on May 5, 2023 Popularity 3/10 Helpfulness 2/10

answer handling input file type upload

handling input file type upload

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
$extension = $request->file->getClientOriginalExtension();
$path = $request->file->getRealPath();
$name = $request->file->getClientOriginalName();

//other approach
//https://www.youtube.com/watch?v=t8S2jB0sW4U

Popularity 3/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: file-type input javascript upload

Link to this answer
Share Copy Link

Contributed on May 05 2023

iF n OnLy iF

0 Answers Avg Quality 2/10

handling input file type upload

Contents

More Related Answers

handling input file type upload

Grepper

Documentation

Social

Legal

Contact

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