Return to homepage
48/68. Setting up file sharing
This episode is for premium members only.

Take your skills to the next level with a premium membership.

Join now

Already a member? Sign in and enjoy.

Comments

Christiaan

Hi Alex and viewers,

For the copy to clipboard section. I notice that execCommand() is deprecated, is there any reason not to use the Clipboard API, i.e. await navigator.clipboard.writeText(value);

Seems to work fine with the limited testing I have done for this use case.

Looking forward to hearing your thoughts.

^C

  • 2
Kunal

I ran the default stripe migration but getting error of 'SQLSTATE[42S22]: Column not found: 1054 Unknown column 'subscriptions.stripe_plan' , should i add column manually , there's seems to be some change in table structure for cashier

  • 0
Kunal

Hey Alex, initially here we are uploading the file to s3 then later sending one more Axios call to store in the database, is there any way we can use some sort of DB transaction in here, for e.g if for some reason we failed to store the info of file in database how can we revert it back and delete the file from S3 bucket. Same thing I thought in other courses like in Twitter clone you were first storing media then later sending requests to store the tweets. Thanks

  • 0
Wim

Hi, whenever I refresh the pages, the user is not logged in anymore. Any ideas how to fix this?

  • 1
Hristijan

I have 'localhost,localhost:3000,localhost:8080,127.0.0.1,127.0.0.1:8080,::1' as the value for the SANCTUM_STATEFUL_DOMAINS and my client is getting served on the localhost:8080 and I still get 401 (Unauthorized) for some reason when I try to authenticate the user with "await axios.post('/api/login', credentials);"

  • 0
Pranab

Hi Alex,

I want to how to deploy such applications which need to have the same domain names? In this application, we want to have our API and client both run on the same domain i.e localhost how can we achieve the same on production.

Thank You.

  • 0
Marcello

I really ran out in a ton of errors when trying to follow the steps of the installation of tailwind as described...I just installed it with Vite, I do hope the rest of the course won't change!

  • 0
Marcello

Does this work for large file uploads?

I managed to upload files to S3 but I am having a hard time with large files as it becomes very slow when you are trying to upload from https and multipart uploading seems to be quite a headache since I don't know the exact folder from which the user will be uploading the files (and thus using fopen is fairly difficult..)

  • 1
Kunal

Did you find any solution , its taking me almost 3 seconds for connection (api/signed) and then upload the small size image ( 300 kb). I've enabled the Transfer Acceleration and I've chosen the closest AWS region

  • 0
MARTIN

How can I find the source code in this video?

  • 2
Ruslan

@Alex Could you please share the source code for this course? Thanks.

  • 0
hello

Hello . How is this mapAction used in Vuejs3 setup() CompositionAPI? Because the tutorial does not use the VUEJS3 new Composition API

  • 0
Ruslan

Hi Alex, could you please share the source code here? Thanks.

  • 0
Vannak

Hi Alex, Can Help em I got this error when post form data to S3 .

<Error

<Code

InvalidArgument </Code

<Message

Bucket POST must contain a field named 'key'. If it is specified, please check the order of the fields. </Message

<ArgumentName

key </ArgumentName

<ArgumentValue /

<RequestId

V6HHYPJY1Q6XVSPZ </RequestId

<HostId

9fppyJs7K0WPlWp4Qx4FvWJE6ki5DOCBConJn6OAVeWnymYWe4/TBzeU5/U9Gte5c9U42feyIMM= </HostId

  • 1
hello

Hi . Your request must need to have the name and password fields and try again

  • 0
zy

Hi Alex, Could you teach me how to use the Filepond and Laravel-Excel packages at the same time? I need to use the Laravel-Excel package to validate the data in the XLS file, store the file itself in the disk, and store the specific content in the Xls file to the database. And further, I wonder if customers can view the contents of Doc or Xls files directly in the browser.

  • 1
Vannak

Can U help me? I got : Eror xhr.js?b50d:177 POST https://findod-testonly.s3.amazonaws.com/ 400 (Bad Request) dispatchXhrRequest @ xhr.js?b50d:177 xhrAdapter @ xhr.js?b50d:13 dispatchRequest @ dispatchRequest.js?5270:52 Promise.then (async) request @ Axios.js?0a06:61 Axios. @ Axios.js?0a06:87 wrap @ bind.js?1d2b:9 eval @ AppUploader.vue?7dc8:52 Promise.then (async) process @ AppUploader.vue?7dc8:36 eval @ filepond.js?c062:5265 process @ filepond.js?c062:5440 success @ filepond.js?c062:5920 eval @ filepond.js?c062:7147 Promise.then (async) eval @ filepond.js?c062:7144 process @ filepond.js?c062:5927 eval @ filepond.js?c062:7119 eval @ filepond.js?c062:6286 dispatch @ filepond.js?c062:74 eval @ filepond.js?c062:60 processDispatchQueue @ filepond.js?c062:57 _write @ filepond.js?c062:11398 eval @ filepond.js?c062:12387 eval @ filepond.js?c062:12386 eval @ filepond.js?c062:1408 tick @ filepond.js?c062:1407 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 requestAnimationFrame (async) requestTick @ filepond.js?c062:1370 tick @ filepond.js?c062:1386 createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 400 at createError (createError.js?2d83:16) at settle (settle.js?467f:17) at XMLHttpRequest.handleLoad (xhr.js?b50d:62)

  • 1
Ruslan

Hi @Alex, could you please share the existing source code? Thanks a lot in advance.

  • 0
Abdulaziz

@Alex

why there is no source code in your courses ?

  • 3
wandumi

I was looking where you used the sanctum to access information from the server and use it in a front end. This application you have cleared my worry and you have done it in a way am able to understand. Thanks

  • 0
Shane

Hi Alex,

Any update on when this course will be completed?

  • 3
Jeremy

Here are some repos for this project:

https://github.com/jeremykenedy/hiupload-client

https://github.com/jeremykenedy/hiupload-api

  • 0
Jeremy

I have been working through this one and its great.

It's still a WIP but here is the repo as I go.

A few mods to note: Using Font Awesome, Created seeder for plans that is configurable in the .env, using SweetAlert2 for pop-ups, and built an error message alert component. Still have to finish the project, update the readme's and make some more mods I would like here and there.

https://github.com/jeremykenedy/hiupload-client

https://github.com/jeremykenedy/hiupload-api

  • 1
Jeremy

Is there a repo for this?

  • 4
Ruslan

Hi Alex, just wondering is this course already completed or more lessons are on board? Thanks!

  • 1
Light

This course has "In development" tag, so it's not completed yet.

  • 0
Ruslan

Hi, Light, thanks for letting me know about the tag meaning, appreciated. I noted there were no updates here for a while and just wanted to get some updates from Alex about the course roadmap, what to expect to see here in a further. Thanks.

  • 0
Ruddy

Hi,I am trying to display pdf into my web using pdf.js but I don’t have access to s3 bucket and I don’t want to make it (bucket) public so how I can have the access on laravel level ?

Thank you

  • 1
altrano

I got this.

<Error

<Code

InvalidPolicyDocument </Code

<Message

Invalid Policy: Invalid Simple-Condition: Simple-Conditions must have exactly one property specified. </Message

<RequestId

CFBF201C32CA47A2 </RequestId

<HostId

7Hap4tQkNJP+E2rpU8LlE8+0TeUU+28/dUyQ5+WegsjogfCR6Qejbn4hOIfwB5J95YqDp1Gn4Ug= </HostId

Need Help.

  • 0
Adam

I have the same issue - did you figure it out?

Thanks

  • 0
Adam

Ah.... for me it was accidentally adding the 'starts-with' as a key (as per the first record) -

['starts-with' => '$key', 'files/']

Whereas Alex clearly writes it correctly -

['starts-with', '$key', 'files/']

Hope this helps anyone else!

  • 0
Ruslan

Hi Alex,

awesome course! Just wondering how to get a safe links sharing implemented for the certain files uploaded, f.ex. generate randomised urls plus add some other kind of protection and hide the original file route. Glad to hear any advices and it will be great to see a such option in this course of course.

Thank you in advance.

  • 0
Ruddy

Thank you, Alex, great course. Any plan to add an electronic signature (Digital Signature) on an existing pdf?

Thank you again.

  • 2
Chris

ok I'm stumped on this error - anyone have any ideas? I'm on lesson 20. files.js:

import axios from 'axios'

export default { namespaced: true, state: { files: [] }, mutations: { SET_FILES(state, files) { state.files = files },

1 ADD_FILE(state, file) {
2 state.files = [file, ...state.files]
3 }
4},
5getters: {
6 files(state) {
7 return state.files
8 }
9},
10actions: {
11 async getFiles({ commit }) {
12 let response = await axios.get('/api/files')
13
14 commit('SET_FILES', response.data)
15 }
16},

}

Upload.vue

import { mapActions, mapGetters, mapMutations } from "vuex" import AppFiles from '../components/AppFiles.vue' import AppUploader from '../components/AppUploader.vue' import axios from 'axios' export default { components: { AppFiles, AppUploader }, computed: { ...mapGetters({ files: 'files/files' }) },

1methods: {
2 ...mapActions({
3 getFiles: 'files/getFiles'
4 }),
5
6 ...mapMutations({
7 addFile: 'files/ADD_FILE'
8 }),
9 async storeFile(file) {
10 let response = await axios.post('/api/files', {
11 name: file.filename,
12 size: file.fileSize,
13 path: file.serverId
14 })
15
16 this.addFile(response.data.data)
17 }
18},
19mounted() {
20 this.getFiles()
21}

};

error:

nonIterableSpread.js?3427:2 Uncaught (in promise) TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method. at _nonIterableSpread (nonIterableSpread.js?3427:2) at _toConsumableArray (toConsumableArray.js?2909:6) at Store.ADD_FILE (files.js?d979:14) at wrappedMutationHandler (vuex.esm-browser.js?5502:808) at commitIterator (vuex.esm-browser.js?5502:438) at Array.forEach () at eval (vuex.esm-browser.js?5502:437) at Store._withCommit (vuex.esm-browser.js?5502:596) at Store.commit (vuex.esm-browser.js?5502:436) at Store.boundCommit [as commit] (vuex.esm-browser.js?5502:376)

  • 0
Chris

Anyone have any idea?

  • 0
Chris

Any chance of getting the file code so far so I can see what I've done wrong (and also allow me to copy and paste css classes to save time!)?

  • 0
Chris

I doubt anyone will make the same mistake but I had

1actions: {
2 async getFiles({ commit }) {
3 let response = await axios.get('/api/files')
4
5 commit('SET_FILES', response.data)
6 }
7},

and not

1actions: {
2 async getFiles({ commit }) {
3 let response = await axios.get('/api/files')
4
5 commit('SET_FILES', response.data.data)
6 }
7},

So state.files became state.files.data - anyway fixed now

  • 0
Asansa

How to get the right click import option in VSCode, Using MacOS, php intenseness plugin installed, Any other plugins needed to be installed

  • 0
Kunal

Install PHP Namespace Resolver for vscode

  • 0
Chris

Not sure if unpopular opinion - having to use tailwind is really annoying - like inline styles. It would be much easier to use separate css/sass and then include a link to them. It wastes so much time typing them in when really the course should be about laravel and vue and not tailwind.

  • 2
Johan

Wouldn't it be better to create a subscription to the free plan for each user when they register?

  • 0
Alex

Either way works. It felt a bit weird to create a free plan over on Stripe immediately, but swap it out if you think it makes more sense :)

  • 0
Sajid

I get this error. Do you know what to do?

1Vue CLI v4.5.9
2✨ Creating project in /Users/sajidlatif/Sites/hiuploadclient.
3🗃 Initializing git repository...
4⚙️ Installing CLI plugins. This might take a while...
5
6npm ERR! code ERR_SOCKET_TIMEOUT
7npm ERR! errno ERR_SOCKET_TIMEOUT
8npm ERR! request to https://registry.npm.taobao.org/loglevel failed, reason: Socket timeout
9
10npm ERR! A complete log of this run can be found in:
11npm ERR! /Users/sajidlatif/.npm/_logs/2021-01-05T17_50_48_410Z-debug.log
12 ERROR command failed: npm install --loglevel error --legacy-peer-deps

I have researched a bit and found this on stackoverflow. But still I couldnt fix the issue... https://stackoverflow.com/questions/60843900/vue-cli-error-creating-new-project-npm-error

  • 2
Johan

I have problem with 'Access-Control-Allow-Origin', anybody have idea mi config in CORS is [ { "AllowedHeaders": [ "" ], "AllowedMethods": [ "PUT", "POST", "DELETE", "HEAD" ], "AllowedOrigins": [ "" ], "ExposeHeaders": [] } ]

  • 0
Alex

Here's the exact CORS config from the course. Looks like your AllowedOrigins is empty.

1[
2 {
3 "AllowedHeaders": [
4 "*"
5 ],
6 "AllowedMethods": [
7 "PUT",
8 "POST",
9 "DELETE"
10 ],
11 "AllowedOrigins": [
12 "http://localhost:8080"
13 ],
14 "ExposeHeaders": []
15 }
16]
  • 0
Johan

yes!!, thanks

  • 0
Filip

And also don't forget to restart the api development server, to reload the config ;)

  • 0
Jovani

Hey, I know this has nothing to do with this course but is it possible to make a course on how to upload videos to VIMEO with laravel ?

  • 2
Ruslan

Hi Alex, just wanted to add, it will be great to get the videos uploading, automatically conversion (f.ex. using the self-hosted ffmpeg, and/or ffmpeg serverless function, or AWS Elastic Transcoder) and securely sharing functionality added as an update of this course or create a new one based on top of this file sharing SaaS project. Thanks in advance!

  • 0
Martin

Thx, great course. Could you maybe implement resumble file upload and download in this or future courses? I played around with tus but with mediocre success, would be nice to see how you would implement this properly.

tus: https://github.com/ankitpokhrel/tus-php/wiki/Laravel-&-Lumen-Integration

  • 1
Alex

Hi Martin, while I might not include that in this course, I'll note down some tus ideas and see what I can do with FilePond, then you could integrate it into the course.

  • 0
Rid

When the next videos are coming?

  • 3
Alex

Every day until we're done :)

  • 0
Ruslan

Hi Alex, just wondering is there any roadmap of the forthcoming features there, or? Thanks!

  • 0
Thomas

Why did you decide against a frontend framework like nuxt.js to build the client application? I think it's a little bit easier to build, or?

  • 4
Alex

Great question. I intentionally went back to pure Vue for some great learning opportunities, and I wanted to keep this really lightweight.

Of course, nothing to stop this being built along with Nuxt while the course is followed!

  • 0
Rohan

Yeah I am planning to implement the frontend in React instead!

  • 0
Mahmoud

Very big thanks, you are the best

  • 4