m615's avatar
Level 2

Why does my file get the .bin extetion added to it when using s3 storage?

I'm creating a Vue component that uses the Uppy javascript library for uploading files. I'm Using s3 storage. The file time that I'm trying to upload is a 3d model file format .glb

When the file gets uploaded and saved to the s3 bucket the file path that comes back has a .bin extension applied to it. How do I force the Storage::disk('s3')->put() to use the file extension from the name of the file when uploading and saving to s3?

public function store(Request $request)
    {
        if($request->file) {
            /// use storage to send to s3
            $path = Storage::disk('s3')->put('models', $request->file);

            return response()->json([
                'status_code' => 200,
                'path' => $path,
                'file' => $request->file
            ]);
        }

        return response()->json([
            'status_code' => 400,
            'message' => 'file not present in the request params'
        ]);
    }

My code from Vue using Uppy

 this.uppy = new Uppy({
                debug: true,
                autoProceed: true,
                allowedFileTypes: [ 'model/gltf-binary']
            })
                .use(Dashboard, {
                    inline:true,
                    height: 350,
                    target: this.$refs['drag-drop-area'],
                    replaceTargetContent: true,
                    showProgressDetails: true,
                    browserBackButtonClose: true
                })
                .use(XHRUpload, {
                    limit:1,
                    endpoint: '/api/file/upload',
                    formData: true,
                    fieldName: 'file',
                    method: 'post',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                });

            this.uppy.on('file-added', (file) => {
                file.type = 'model/gltf-binary';
               console.log(file);
            });

            this.uppy.on('complete', this.onUploadComplete);
0 likes
1 reply
m615's avatar
m615
OP
Best Answer
Level 2

My solution was to name the file myself and add the extension that new name like this.

$org_file_name = $request->file->getClientOriginalName();
$new_name = Uuid::uuid4() . '.' . pathinfo($org_file_name, PATHINFO_EXTENSION);

$path = Storage::disk('s3')->putFileAs('models', $request->file, $new_name);

Please or to participate in this conversation.