How use Vuesax upload component in Laravel/Vue.js project?

user_6751388 0
Viewed 1335

I'm working on this project base on tutorials around web and YOUTUBE . My problem is that base on tutorial I've got a from like this:

<form class="form-horizontal">
    <div class="form-group">
        <label for="mellicode_front_url" class="col-sm-2 control-label">scan</label>

        <div class="col-sm-12">
            <input type="file" @change="updateMelliCodeFrontScan" name="mellicode_front_url" class="form-input" >
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-12">
            <button @click.prevent="saveMelliCodeFrontScan" type="submit" class="btn btn-success">submit scan</button>
        </div>
    </div>
</form>

as u can see in this code when i opened a IMAGE file i use @change method, then I'll use click.prevent in submit button to upload image into host.

problem is I'm using component from this site :

https://lusaxweb.github.io/vuesax/components/upload.html

which it's using this type of code for uploading :

<vs-upload action="https://jsonplaceholder.typicode.com/posts/" @on-success="successUpload" />

I've changed and removed action with onChange and other things but just because i'm beginner i'm sure i didn't properly. so what i'm trying to do is implement those @change="updateShenasnameScan" & @click.prevent="saveShenasnameScan" into this vs-upload component.

vuejs2 vue-component javascript
1 Answers

I think that component not supporting the binding or form object to assign the files to it. But in the backend in Laravel you can get files by $_FILES, this will gives you an object of files that you can use it and store the files simply on the server.

Here is my work on this upload system

Laravel Function

public function store(Request $request)
{
    $stored = [];
    $files = $_FILES;
    foreach ($files['archive']['tmp_name'] as $key => $value) {
        $file = file_get_contents($value);
        if(Storage::disk('local')->put('archive/'. $files['archive']['name'][$key], $file)){
            $stored[$key] = 'archive/'. $files['archive']['name'][$key];
        }else{
            $stored[$key] = $files['archive']['error'][$key];
        }
    }
    return $stored;
}

And the VUE code, that you can find more about it here https://lusaxweb.github.io/vuesax/components/upload.html#automatic

<vs-upload multiple fileName='archive[]' automatic action="/api/archive" @on-success="successUpload" />

And the $_FILES data as bellow

enter image description here

user_92462970
Related