dineshsuthar92's avatar

Issues in image uploading using vue-wysiwyg

I am using vue-wysiwyg editor in my laravel-vue application. In this editor there is an option to upload images and through incomplete documentation of this package I am able to upload the image and get public url of the uploaded file. But this package works sometimes and does not work at all sometimes.

Here is how I am using this package

main.js

import wysiwyg from "vue-wysiwyg";

Vue.use(wysiwyg, {
    forcePlainTextOnPaste: true,
    image: {
        uploadURL: "/api/save-support-files",
        dropzoneOptions: {}
    },
});

/api/save-support-files

public function uploadUserFile(Request $request)
    {
        $uploadedFile = $request->file('file');


        if (false == $uploadedFile) {
            return response()->api(false, 'Kindly upload a file');
        }

        $allowed_file_extentions = [
            'jpeg',
            'png',
            'jpg',
            'gif',
            'svg'
        ];

        if (false == in_array($uploadedFile->getClientOriginalExtension(), $allowed_file_extentions)) {
            return response()->api(false,'Allowed file types are jpeg, png, jpg, gif, svg',null);
        }


        $file_url = Storage::disk('public')->putFileAs('/support-files',$uploadedFile,generateRandomString('5').'.'.$uploadedFile->getClientOriginalExtension());

//        return response()->api(true,'File uploaded successfully',config('app.url').'/storage/'.$file_url);

        return config('app.url').'/storage/'.$file_url;
}

Issues I am facing right now:

  1. As soon as I select image from file browser, image is uploaded through api successfully but it is not showing in editor.

  2. Unable to select already uploaded image, I have to refresh the page and then again select file to upload it again.

Is anyone having solution to this problem ? Kindly help me out.

0 likes
0 replies

Please or to participate in this conversation.