[Vuejs]-Upload file to public folder of vuejs

1๐Ÿ‘

//Follow this instruction
File
<input
type="file"
ref="image2"
v-on:change="handleFilesUpload()"
/>
In methods properties 
handleFilesUpload() {
      let uploadedFiles = this.$refs.image2.files;
      let fileExtension = uploadedFiles[0].name.replace(/^.*\./, "");
      //console.log("fileExtension", fileExtension);

      let allowedExtensions = /(\.jpg|\.JPG|\.jpeg|\.JPEG|\.png|\.PNG|\.pdf|\.PDF|\.doc|\.docx)$/i;
      if (!allowedExtensions.exec(uploadedFiles[0].name)) {
       var message = "You can upload jpg, jpeg, png, pdf and docx file only";     
        this.$refs.image2.value = "";
        this.documentFiles = [];
      } else {
        //console.log("uploadedFiles[i] = ", uploadedFiles[0]);     
        //Upload for single file        
        this.documentFiles = uploadedFiles;
        //Upload for multiple file
        /*
        for (var i = 0; i < uploadedFiles.length; i++) {
          this.documentFiles.push(uploadedFiles[i]);
        }
        */
      }
    },
// After submit form
validateBeforeSubmit(e) {
      let formData = new FormData();  
      for (var i = 0; i < this.documentFiles.length; i++) {
        let file = this.documentFiles[i];
        formData.append("files[" + i + "]", file);
      } 
      axios.post('laravel-api-url', formData)
      .then(res => {
              console.log({res});
          }).catch(err => {
          console.error({err});
        });
    },
--In Laravel controller function--
public function save($request){
        $total = @count($_FILES['files']['name']);
            if ($total>0)
            {
                $allFiles = $this->uploadFiles($request);
                $data['document_file_name'] = ($allFiles) ? $allFiles[0] : 
                $result = CreditMaster::create($data);
                if ($result) {
                    return response()->json(array('status' => 1,
                    'message' => 'Data saved successfully!'));
                } else {
                    return response()->json(array('status' => 0, 'message' => 'Save failed!'));
                }
            }
}
public function uploadFiles($request)
    {
        $storeFileName = [];
        $total = @count($_FILES['files']['name']);
        $diretory = '/save_directory_name/';
        $path = public_path() . $diretory;
        $fileForMate = time() . '_';
        for ($i = 0; $i < $total; $i++) {
            $tmpFilePath = $_FILES['files']['tmp_name'][$i];
            if ($tmpFilePath != "") {
                $fileName = $fileForMate . $_FILES['files']['name'][$i];
                $newFilePath = $path . $fileName;
                if (move_uploaded_file($tmpFilePath, $newFilePath)) {
                    array_push($storeFileName, $diretory.$fileName);
                }
                else
                {
                    return $_FILES["files"]["error"];
                }
            }
        }
        return $storeFileName;
    }
๐Ÿ‘คBulbul Sarker

Leave a comment