Flutter Tutorial - Drag And Drop File Upload | Drop Files Into Dropzone
Вставка
- Опубліковано 23 лип 2024
- Learn how to create a Drag and Drop File Upload with Flutter Web to drop files easily into a dropzone in Flutter.
Click here to Subscribe to Johannes Milke: ua-cam.com/users/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/drop...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Upload File To Firebase Storage Tutorial: • Flutter Tutorial - Upl...
Download File From Firebase Storage Tutorial: • Flutter Tutorial - Dow...
Hive NoSQL Database Tutorial: • Flutter Tutorial - Hiv...
SQFlite SQL Database Tutorial: • Flutter Tutorial - SQL...
Drag & Drop Widgets Tutorial: • Flutter Tutorial - Dra...
Drag & Drop In ListView Tutorial: • Flutter Tutorial - Dra...
Drag & Select In GridView Tutorial: • Flutter Tutorial - Dra...
Draggable Modal Bottom Sheet Tutorial: • Flutter Tutorial - Dra...
Draggable Scrollable Sheet Tutorial: • Video
Flutter Upgrade Tutorial: • Flutter Tutorial - Flu...
QR Code Scanner Tutorial: • Flutter Tutorial - QR ...
Barcode Scanner Tutorial: • Flutter Tutorial - Bar...
Google SignIn With Firebase Tutorial: • Flutter Tutorial - Goo...
Fix Bottom Overflowed By Pixels Tutorial: • Flutter Tutorial - Fix...
Flutter Layout Basics Tutorial: • Flutter Layout Basics:...
Create Invoice PDF Document Tutorial: • Flutter Tutorial - Cre...
TIMELINE
0:00 Introduction Drag And Drop File Upload
0:19 Create File Dropzone / Create Drag And Drop File Upload
2:05 Get File Size, File Url, MIME Of Dropped File
3:18 Create Upload Files Button
4:55 Display Dropped File In UI / Display Dropped Image File In UI
9:20 Highlighted Dropzone UI For User Feedback
11:12 Improve Dropzone UI
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke - Наука та технологія
![Flutter Tutorial - Copy to Clipboard In 60 Seconds [2021] How To Copy Text To Clipboard](http://i.ytimg.com/vi/whVnZnSsU3o/mqdefault.jpg)
![Flutter Tutorial - Copy to Clipboard In 60 Seconds [2021] How To Copy Text To Clipboard](/img/tr.png)
This might help you :)
👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
Source Code: github.com/JohannesMilke/dropzone_example
Upload File To Firebase Storage Tutorial: ua-cam.com/video/dmZ9Tg9k13U/v-deo.html
Download File From Firebase Storage Tutorial: ua-cam.com/video/YA_fHCF_EYc/v-deo.html
Hive NoSQL Database Tutorial: ua-cam.com/video/w8cZKm9s228/v-deo.html
SQFlite SQL Database Tutorial: ua-cam.com/video/UpKrhZ0Hppk/v-deo.html
Drag & Drop Widgets Tutorial: ua-cam.com/video/Bc0qB1jtHBk/v-deo.html
Drag & Drop In ListView Tutorial: ua-cam.com/video/HmiaGyf55ZM/v-deo.html
Drag & Select In GridView Tutorial: ua-cam.com/video/DozNBmc79L4/v-deo.html
Draggable Modal Bottom Sheet Tutorial: ua-cam.com/video/AjAQglJKcb4/v-deo.html
Draggable Scrollable Sheet Tutorial: ua-cam.com/video/za9Jo99ag2g/v-deo.html
Flutter Upgrade Tutorial: ua-cam.com/video/0QC7S1nUmpY/v-deo.html
QR Code Scanner Tutorial: ua-cam.com/video/hHehIGfX_yU/v-deo.html
Barcode Scanner Tutorial: ua-cam.com/video/jkqR7CSeyNs/v-deo.html
Google SignIn With Firebase Tutorial: ua-cam.com/video/1k-gITZA9CI/v-deo.html
Fix Bottom Overflowed By Pixels Tutorial: ua-cam.com/video/voARoVV_EDI/v-deo.html
Flutter Layout Basics Tutorial: ua-cam.com/video/yYxueTNIDlA/v-deo.html
Create Invoice PDF Document Tutorial: ua-cam.com/video/z_5xkhEkc5Y/v-deo.html
a lovely tutorial. this is just what I need. sensational.
Another exceptional tutorial... Thank you... 🏆
Another awesome video i learn a new thing 😁
Brilliant, Johannes.
Awesome brother. Expecting a lot of good content from you in the future..
Thanks for covering this.
Awesome video keep it up
Thats awsome ❤️
yo love the video! thanks for the knowledge share, keep it up!
Thank you, CuretotheCommonCode! 🙂
Waouh. Thank 👍👍
hello, By any chance, can this work with multiple files, as long as displaying details of those multiple files
hey Bernard, did you get anywhere with this?
can I only allow to upload one file
Respect Sir ji
i have questions that
Fast time open to UA-cam
Show (dialog) after video (data)
Them
Click search icon in UA-cam
Back to go home page
But
This time not show (dialog)
Direct show (videos)data
How can do it
Use (like ..stream builder... future Builder) your choice
Sir how to convert it into a file object so that I can upload it on firebase storage?
Thanks, Sj! 🙂 You can simply upload it with Firebase Storage. Learn more about it here: ua-cam.com/video/dmZ9Tg9k13U/v-deo.html
Simply upload the file like this:
final html.File file = YOUR_FILE_HERE;
FirebaseStorage.instance.ref('...').putBlob(file);
@@HeyFlutter did you try that? It seems that putBlob isnt supported on native platforms
UnimplementedError: putBlob() is not supported on native platforms
In order to get it to work you need to convert the blob or the file, how you like to name it, to an Uint8List and simply pass that in the putData() method
I drag mulipe file to drop. show only the last file how to show all file in preview page
Thank You SHIVA SUNDARA BALAJI J M! Follow this link: pub.dev/packages/flutter_dropzone
I hope you will get your answer 🙂
Awesome video, where do you put Firebase Upload Code please?
Thank You INU Music! Follow this link: github.com/sponsors/JohannesMilke
I hope you will get your answer 🙂
How to restrict for drop can accept only xlsx file.
Thank You Subodh Kumar! Follow this link: medium.com/flutter-community/a-deep-dive-into-draggable-and-dragtarget-in-flutter-487919f6f1e4
I hope you will get your answer 🙂
Would this work on mobile?
Thank you, whoadityanawandar! 🙂. Yes it will.
please make a video of responsive design
Thank you, ! 🙂👍 Check out this video about
Responsive UI Text Layout - Auto Size Text
ua-cam.com/video/0O_qDZ48F7o/v-deo.html
Flutter Web Chat UI With StreamChat Response Web App 3/3
ua-cam.com/video/zjfJaicmLSI/v-deo.html
I requested access to your code. I haven't received an email yet.
Thank You @user-yg5wn3pl5l!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
Pls make a simple video to run python script into flutter
I had already accessed and requested you but you don't respond it. Can you please share source code?
Thank You Sarat M!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
How to change app icon android & iOS + web (top left corner) icon + desktop (if possible) in a next video .
All possible ways
Nice ! Your's welcome :),@@HeyFlutter how change flutter logo top left side on browser (chrome | Edge) I. Flutter web.
how u upload videos, what I need? :)
Thanks, Pritom Chaki! 🙂Simply upload videos / images with Firebase Storage: ua-cam.com/video/dmZ9Tg9k13U/v-deo.html