 |  |
Though the Internet would have you believe otherwise, uploading a file asynchronously from AngularJS isn't that hard. I don't want fancy colors or previews or progress bars or any of that. I want to upload a file from my AngularJS-backed webapp without reloading the page. Also, I don't care about old browsers. If you do, then this might not work for you.
After struggling with blueimp's library for way too long, I decided to just implement the part I needed.
Uploading a file using AJAX + AngularJS requires three things:
- AJAX
- AngularJS
- AJAX + AngularJS
1. AJAX
function upload(url, file) {
var formdata = new FormData(),
xhr = new XMLHttpRequest();
formdata.append('myfile', file);
xhr.onreadystatechange = function(r) {
if (4 === this.readyState) {
if (xhr.status == 200) {
// success
} else {
// failure
}
}
}
xhr.open("POST", url, true);
xhr.send(formdata);
}
The file will be posted to the server as the parameter named myfile.
2. AngularJS
app.directive('fileChange', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('change', function() {
scope.$apply(function() {
scope[attrs['fileChange']](element[0].files);
})
})
},
}
})
If you use the above directive like this:
<input type="file" file-change="runSomething">
when the user chooses a file to upload, runSomething will be called with a FileList. You can pass the first element in that list as the second arg to the upload function above.
3. AJAX + AngularJS
I can't provide a complete demo (because this blog isn't backed by a server I control). But this will probably get you really close:
<!DOCTYPE html>
<html lang="en">
<body ng-app="myapp" ng-controller="UploadCtrl">
<input type="file" file-change="upload">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// the javascript
var app = angular.module('myapp', []);
//
// Reusable Uploader service.
//
app.factory('Uploader', function($q, $rootScope) {
this.upload = function(url, file) {
var deferred = $q.defer(),
formdata = new FormData(),
xhr = new XMLHttpRequest();
formdata.append('file', file);
xhr.onreadystatechange = function(r) {
if (4 === this.readyState) {
if (xhr.status == 200) {
$rootScope.$apply(function() {
deferred.resolve(xhr);
});
} else {
$rootScope.$apply(function() {
deferred.reject(xhr);
});
}
}
}
xhr.open("POST", url, true);
xhr.send(formdata);
return deferred.promise;
};
return this;
})
//
// fileChange directive because ng-change doesn't work for file inputs.
//
app.directive('fileChange', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('change', function() {
scope.$apply(function() {
scope[attrs['fileChange']](element[0].files);
})
})
},
}
})
//
// Example controller
//
app.controller('UploadCtrl', function($scope, $http, Uploader) {
$scope.upload = function(files) {
var r = Uploader.upload('/uploads', files[0]);
r.then(
function(r) {
// success
},
function(r) {
// failure
});
}
});
</script>
</body>
</html>
More
You can do more things like handle multiple files, monitor progress, preview images, etc... But if you don't need all that, and you are using modern browsers, this should do just fine.
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteHi , Could you please share the server side code for this implementation, I am trying to save a file in db which is being uploaded as you shown
ReplyDeleteYour server-side code depends on what language/framework you're using. Here's a complete example using Flask:
Deletehttps://gist.github.com/iffy/ea5e7278ab0b4e6ebf54
Thanks for sharing the informative blog! If you are looking for the best Angular development company in USA, appbiz360 can help you.
ReplyDelete
ReplyDeleteالفارس العالمية للخيام والصناعات المعدنية
شركة رائدة في تصنيع وتوريد المظلات ومقرها في الإمارات العربية المتحدة. بيت إنتاج بمساحة 1.5 مليون قدم مربع مع أكثر من 900 موظف يعملون في 5 فروع. لعقود من الزمان ، تواصل شركة الفارس إرضاء عملائها. من المظلات المهيبة والمباني متعددة الطوابق التي تخدم عددًا هائلاً من الناس ، إلى مظلات وقوف السيارات عالية الجودة. تعد الأخلاقيات والجودة والدقة في إدارة المشاريع من المحركات الرئيسية لاستراتيجية أعمالهم. من خلال التخطيط الدقيق والتصميم والهندسة ؛ سيتم ضمان المشاريع المتميزة. تتمثل رؤية الفارس في تغطية العالم من خلال توفير أفضل المنتجات للعملاء من خلال تجاوز توقعاتهم محليًا ودوليًا من خلال توفر خيام مخصصة تلبي أي رغبات واحتياجات.
العمل مع علامات تجارية مثل طيران الإمارات للرجبي سيفنز وفورمولا إي الدولي ورالي داكار ومستشفى الإمارات الميداني وغيرها الكثير. حازت شركة الفارس على جائزة "Marquee Manufacturers of the Year 21" من قبل جوائز الأعمال الإماراتية ؛ وجائزة التقدير من الجهات المشاركة في "مهرجان ليوا للتمور".
تقدم شركة الفارس خدمات لتلبية الاحتياجات مثل:
- خيمة فاعليات
- المعارض
- خيمة زفاف . خيمة اعراس .
- رياضات
- خيمة مجلس
- رمضان
- خيم عزاء . خيمة عزاء . خيمة عزاء دبي . خيمة عزاء ابوظبي
- منتجعات
- ندوة
- المباني الجاهزة
- مظلات مواقف السيارات
- حظائر المطار
- مستشفى ميداني أو خيام طبية
يمكن تخصيص كل هذه الأحداث مع مجموعة واسعة متاحة في مصانع الإنتاج الخاصة بهم. من الأشكال ، والأثاث الداخلي ، والمشاهد الفاخرة ، والمشاهد التقليدية ، إلى أنظمة الإضاءة ، وسعة تقديم الطعام ، والسجاد ، والجدران ، والنوافذ ، كلها متاحة للتحقق من موقعهم على الإنترنت: https://www.alfarestents.com/photo-gallery/en.
alfarestents.com
It is really a great post by you.
ReplyDeleteMaking task is one of the pieces of a professional education that gives a superior comprehension of the subject to the understudy. The greater part of the understudies stuck while making their task. Are you additionally one of them. In the event that indeed, there are numerous task creators in market who will give assistance you in making your tasks and assist you with achieving passing marks.
A wide range of subjects where understudies generally look for online task help are BSBSUS201 assessment answers Help, Management Assignment Help, bsbdiv501 appraisal replies, and so on.