CODEWITHSUNDEEP
phplaravelvue.jsdropzonevue-dropzone
Jin
Jin

Reputation: 163

How to add more file with an existing file in vueDropzone - Laravel?

I got a problem with adding more files on updating products with existing files from the server using vueDropzone. In the first place, I don't have a problem with adding multiple files, but when I edit the product then add more files, or even just I only updated the Product Name without updating the files. It throws me an error from the Laravel validator.

By the way, I am using Vue.js and I am only using one method for Add/Update product.

Here is my vuedropzone component.

<vue-dropzone 
    ref="product_images" 
    id="dropzone" 
    :options="dropzoneOptions" 
    @vdropzone-success-multiple="dzAfterComplete" 
    @vdropzone-removed-file="dzAfterRemove" 
    @vdropzone-max-files-reached="dzMaxFiles" 
    @vdropzone-error-multiple="dzComplete"
    @vdropzone-file-added-manually="dzThumbnil">
</vue-dropzone>

This is my submitProduct() method.

submitProduct() {
    let images = this.$refs.product_images.getAcceptedFiles();

    let formData = new FormData();
    if ( images.length > 0 ) {
        for ( var i = 0; i < images.length; i++ ) {
            let file = images[i];
            formData.append('images[' + i + ']', file);
        }
    }
    else {
        formData.append('images[]', '');
    }
    if (this.product.id)
        formData.append('id', this.product.id); // update if it has ID

    
    // axios.post()
}

And my editProduct method.

editProduct(data) {
    this.$refs.product_images.removeAllFiles(); // empty dropzone first
    
    for ( var i = 0; i < data.images.length; i++ ) {
        let file = { 
            size: data.images[i].size, 
            name: data.images[i].name, 
            type: data.images[i].type,
            accepted: true
        };
        let url = '{{ url('/') }}/' + data.images[i].path;
        this.$refs.product_images.manuallyAddFile(file, url);
    }
    $('#productModal').modal('show');
},

The existing files are displayed on the dropzone area, however, when I submit the form the Laravel validator throws an error because the images are null. But it has files when I check in console.log() before submitting the form.

public function storeProduct(Request $request)
{   
    $this->validate($request, [
        'images.*'  => 'mimes:jpeg,jpg,png|required|max:2048',
    ]);

    // when I check the file
    return response()->json($request->file('images')); 

    // it's return images: null
}

Any help would be much appreciated. Hope it's a clear statement.

Cheers!

Upvotes: 1

Views: 666

Answers (0)

Related Questions