Issue I am having an issue with Angular File upload, being used with relatively positioned elements. My drop target is 100% width and height, absolutely positioned. If you drag the file over any non-relatively positioned element, the overlay appears fine
Continue readingTag: angular-file-upload
Asset pipeline not loading script from rails-assets gem
Issue I have added the danial-farid–angular-file-upload library to my rails 4 app via rails assets. The main library loads fine, but sprockets can’t find the shims file it includes for file upload progress. I think this is because the shims
Continue readingAngular JS – $q.all() tracking individual upload progress
Issue I’m using angular-file-upload module by danialfarid (https://github.com/danialfarid/angular-file-upload) and it works great. I’ve been able to integrate in my wrapper service for REST calls and I can actually upload several images with $q.all() and keeping track of their progress. However,
Continue readingAngular file upload without local server?
Issue I’m trying to create a file upload for an Angular application. I would like users to be able to browse their local file system for a file to upload, just like you can do on any number of common
Continue readingScript error in angular-file-upload.js
Issue I get ‘Script error in the below js’ file .This is the file downloaded using bower install from cloudinary-angular from git hub. Whats the error here? angular-file-upload.js /**! * AngularJS file upload/drop directive with http post and progress *
Continue readingAngularJS, angular-file-upload issue, I can't get $file
Issue I’m trying to use https://github.com/danialfarid/angular-file-upload but apparently I can’t access the file my HTML <img src = “{{ userPhotoUrl }}” alt = “” class = “img-circle img-responsive” accept = “image/*” data-multiple = “false” ng-file-select = “onFileSelect($file)” > my Coffescript:
Continue readingangular-file-upload provisional headers are not sent in IE browser
Issue I am using angular-file-upload in my application especially for IE compatability, before I have Used Formdata to upload files, Its working fine chrome, but its not working in IE9+ browser, The problem is the provisional headers set by me
Continue readingng-file-select does not work when request fails
Issue I am using angular-file-upload in my angular project. https://github.com/danialfarid/angular-file-upload <span ng-file-select=”onFileSelect($files)” class=”btn btn-primary btn-lg” role=”button”>Upload employee list</span> Its working fine for first uplaod but when the upload fails, afterwards it does not work. Please suggest any workaround. Thanks in
Continue readingNot able to upload a file to Rails server with Angular
Issue So I am using the gem ‘angular-file-upload-rails’ which installs me this Angular plugin: Angular File Ipload Now the code I am using currently to upload my file looks like this: HTML: <form ng-controller=”MediumNewCtrl”> <input type=”file” ng-file-select=”upload2($files)” multiple> </form> Coffescript:
Continue readingAngularJS how to send multipart/mixed
Issue I am working on a project where I have to upload a small bit of JSON with a file, working in AngularJS. I’ve written code using Danial Farid’s angular-file-upload, and it is working, except, it always sends “multipart/form-data, boundary=<whatever>”
Continue readingFile upload in Grails application using angular js
Issue I’m working on a Grails (2.3.7) application with AngularJS. I’ve to upload files in my application. Since the front end is managed by Angular , I’m uploading my file from Angular controller. I’ve gone through This and this discussions
Continue readingDoes multipart/formdata content type automatically resume upload after reconnect?
Issue I’m using angular-file-upload library which uses multipart/formdata content type for file uploading. When I tried to simulate network error on the demo page by simply unplugging network cable I saw progress bar stopped and started from the current upload
Continue readingAngularJS error: $apply already in progress
Issue I have this AngularJS 1.0.7 code that is using angular-file-upload plugin to upload photos: HTML: <div ng-hide=”user.mainPhoto” style=”margin-top: 20px”> <center> <div ng-controller=”FileUploadCtrl”> <button class=”btn btn-success btn-primary” ng-click=”clickFileInput(‘addMainPhoto’)”><i class=”fa-icon-picture” style=”vertical-align: middle”></i> {{‘ADD_PROFILE_PHOTO’ | translate}}</button> </div> </center> <input id=”addMainPhoto” type=”file” ng-file-select=”onFileSelect($files,
Continue readingTriggering click event on an element not working in IE8
Issue I am making an angular app but I have found an instance where I need to use jQuery. I need to click a button which raises a click event on another hidden button. I know this seems odd but
Continue readingAngular File Upload ( CORS ) with credentials is not working
Issue I am using angular file module: https://github.com/danialfarid/ng-file-upload. I am facing difficulties in uploading to an api which requires credentials. I am passing ‘withCredentials : true’. This doesn’t seem to work. I am able to successfully upload on another setup
Continue readingAngularJS file upload display image in drag and drop
Issue I’m trying to make the image visible whenever someone drag and dropped it inside the dropbox using angular js file upload I have also looked at this post on SO, but wasn’t able to make it work. I tried
Continue readingSending intermediate data from service to controller using angular-file-upload
Issue I’m using angular-file-upload available here: https://github.com/danialfarid/angular-file-upload. As you can see in the example furnished on the same page, file data is posted to backend from a controller using the directives made available. When I implemented the code however I
Continue readingasync js callback for each upload
Issue I’m new at web develop. I was faced with the following problem: I upload images at amazon s3 and getting callback with response which contains link to this image. Then I push it into array and store this array
Continue readingOnly allow specific file extensions in angular-file-upload module to be clickable
Issue I’m using this module, https://github.com/nervgh/angular-file-upload I am using their simple example, http://nervgh.github.io/pages/angular-file-upload/examples/simple/ When you click “Choose file” button, it will open a window which allows us to pick a file that we want to upload. What I would like
Continue readingangular-file-upload is not posting anything
Issue I am trying to use angular-file-upload. The file is being sent from the view to the angular controller but it is not sending anything to the apiController. I have made a plunker. Plunker It drops the file at $scope.upload
Continue readingsending additional values to PHP script using angular-file-upload
Issue So i am using angular-file-upload For this i need the following controller: app.controller(‘FileUploadCtrl’, [‘$scope’, ‘FileUploader’, function($scope, FileUploader) { var uploader = $scope.uploader = new FileUploader({ url: ‘js/controllers/upload.php’, }); // FILTERS uploader.filters.push({ name: ‘customFilter’, fn: function(item /*{File|FileLikeObject}*/, options) { return
Continue readingHow to change Header Parameters while using angular-file-upload for uploading multiple files
Issue I have this requirement to add file name in header while uploading each file. I am using a single uploader for selecting multiple files. I tried doing this $scope.uploader.onAfterAddingFile = function (fileItem) { $scope.uploader.headers.fileName = fileItem.name; }; But its
Continue readingLib angular file upload with field data object json
Issue I’m using lib angular-file-upload. How do I add the date field of $http request on request below: var app = angular.module(‘app’, [‘angularFileUpload’]); app.controller(‘Aula21Controller’, function($scope, FileUploader){ var uploader = $scope.uploader = new FileUploader({ url : ‘http://localhost:8080/work/v1/chats’, alias: ‘message-body’, headers: {‘X-Client-Instance’:
Continue readingAdding a picture to the MEAN.JS sample with Angular-file-upload
Issue I am using MEAN.JS (https://github.com/meanjs/mean) and angular-file-upload (https://github.com/danialfarid/angular-file-upload). The “Article” sample provided by MEAN.JS contains two fields named “title” and “content”. I want to modify that and add a “picture” field allowing a user to upload a picture. I
Continue readingWhy is my AngularJS binding not always updating properly?
Issue I’m creating a simple image uploading page that works with AWS S3 using Danial Farid’s ng-file-upload plugin. It features a simple button to upload a new image and a list of images. Like this: <ul> <li ng-repeat=”image in product.images”>
Continue readingGet data back after posting files to gridfs with angular-file-upload
Issue I post files from my controller, to my server, where gridfs writes them. After that, there is a writestream.on(‘close’) where I can console.log the file._id to the terminal. How can I set a variable back in my angular controller
Continue readingshow alert box when user select non accepted file in danialfarid/ng-file-upload plugin
Issue I am using danialfarid/ng-file-upload plugin ,I set the ngf-select directive to .doc,.pdf extension. Its working fine. Problem is if a user select .png or jpg file, I want to show an alert box to user that this file type
Continue readingSort/GroupBy files pre-uploaded using AngularJS
Issue I want to group my files before to upload them by extension(The extension can not be defined in the mime type attribute defined by the upload infos. So I used groupBy defined by angular-filter and instead to put an
Continue readinghandling file uploads sent via xhr using play framework v2.4
Issue I am using play framework v2.4 and am testing file uploads sent via a web form (xhr call via angular). I have tried the following two options in the play framework controller (based on https://www.playframework.com/documentation/2.4.x/JavaFileUpload) but neither option works
Continue readingListen to API response using angular-file-upload module
Issue I’m building a WebApp using AngulasJs and Django and I’m currently relying on angular-file-upload to upload image to my api like so : var uploader = $scope.uploader = new FileUploader({ url: ‘http://localhost:8000/image’, headers: { ‘X-CSRFToken’: $(‘input[name=”csrfmiddlewaretoken”]’).attr(‘value’) }, }); The
Continue readingAmazon S3 – ERR_INSECURE_RESPONSE
Issue This question has already been asked here but that answer didn’t help me as I know that the URL is correct as it points to a US Standard url as detailed in the amazon guide here So I’m attempting
Continue readingFileUpload in angularjs
Issue I’m using angular-file-upload as found in Here. It was working for what I needed, but now the need has changed, and I’d like to be able to send additional data about (object) along with the file. There isn’t much
Continue readingAngularjs $injector:modulerr
Issue ng-fileupload having injection error on angular 1.2.3 my source code attached here <!DOCTYPE html> <html ng-app =”dashboard”> <head> <title></title> <script src=”angular.min.js”></script> <script src=”angular-ui-router.js”></script> </head> <body> <div class=”box-content”> <form ng-controller=”mycontroller as up” name=”up.upload_form”> <table cellspacing=”10″ cellpadding=”10″ style=”margin-left: 5%; cellspacing= 7;”>
Continue readingCant get file upload to work using nervgh library
Issue I am new to angularJs. I am trying to upload a .tar file to my server using nervgh angular file upload library. I used the code as is from the example but I get a 500 exception from the
Continue readingangular-file-upload – display uploaded image in browser without streaming it from backend
Issue I am using nervgh/angular-file-upload to let the user take a photo from his mobile phone camera and upload it. It works fine, but now I want to display the image too. Of course I could add that functionality to
Continue readingangularjs angular-file-upload Unknown provider: $uploadProvider error
Issue This is not a duplicate of This Question I have included all the required files in view: <script src=”~/Scripts/angular-file-upload-master/examples/console-sham.min.js”></script> <script src=”~/Content/js/angular.js”></script> <script src=”~/Scripts/angular-file-upload-master/angular-file-upload.js”></script> My module and controller: var controllers = angular.module(‘controllers’, [‘ngGrid’, ‘ngDialog’, ‘angularFileUpload’]); controllers.controller(‘CustomProductsCtrl’, [‘$scope’, ‘$window’, ‘ngDialog’, ‘CommonService’,
Continue readingHow to upload file in php using angular js
Issue Now I am learning angular js with php. I will try to upload files and stored file name in mysql database task.html <!DOCTYPE html> <html> <script src=”js/shared/angular.min.js”></script> <body ng-app=”myApp” ng-controller=”myCtrl”> <div class=”file-upload”> <input type=”text” ng-model=”name”> <input type=”file” file-model=”myFile”/> <button
Continue readingVideo loading message until response comes from backend
Issue Video Upload.js var json = { “request”: { “service”:{ “servicetype”:servicetype, “session_id”: session_id }, “data”:{ “rolename”:rolename } } }; FileService.uploadFile( json, file ).then(function(res){ console.log(JSON.stringify(res)); if( res && res.status.code == 0 ) { $scope.getVideo( res.data.mediaids[0] ); $scope.getAll(); } else FlashService.Error(res.status.message, true);
Continue readingHow to give gif image for loading until response comes from backend
Issue HTML: <div class=”row” ng-if=”dataLoading” src=”data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==” > <div class=”file-upload-wrapper”> <div class=”file-upload”> <img class=”file-image” ng-src=”{{imageSource}}” ng-if=”imageSource”/> <input type=”file” file-model=”image” name=”file” class=”file”/> </div> <div class=”file-upload-text”> Upload Picture</div> </div> <div class=”file-restriction-info”> Maximum 5 Images can be attached.<br/> File size below 10MB. File Format
Continue readingangular-file-upload: additional properties/options to each file in a multi-file upload?
Issue I’m using nervgh’s angular-file-upload, https://github.com/nervgh/angular-file-upload/wiki/Module-API. Is there a way to use the angular-file-upload and allow additional properties to each file when doing a multi-file upload? I’m using their image sample to start out with: http://nervgh.github.io/pages/angular-file-upload/examples/image-preview/ Trying to add a
Continue readingHow to pass data from function to angular controller scope
Issue I stuck at this problem for days. I use angular file upload to upload image. I can upload the image to the server, and I can get the response image url from the server back. But I can’t get
Continue readingangular file upload with nervgh/angular-file-upload
Issue I’m doing a file upload from angular implementing the https://github.com/nervgh/angular-file-upload plugin, my setup it’s like this : var vm = this, apiUrl = appConfig.getItem(‘BASE_API_URL’), // base url; vm.uploader = $scope.uploader = new FileUploader({ url: apiUrl + ‘/invoices/upload’, headers: {
Continue readingangular-file-upload update scope onCompleteItem
Issue So i have a value in my scope called $scope.selectedComponent Then i have the following uploader: var uploader = $scope.uploader = new FileUploader({ url: ‘user_resources/upload.php’, formData: [{module_id: $state.params.id, component: $scope.selectedComponent}] }); // FILTERS uploader.filters.push({ name: ‘customFilter’, fn: function(item /*{File|FileLikeObject}*/,
Continue readingNeed Help! Angular 2 File/Image upload via API
Issue I’m stack around uploading image/file using Angular2. I don’t like to add any plugins to upload file in angular2. Is there any simple way to upload image via API using Angular2 without any third party extension ? NB: i
Continue readingHow do I 'unselect' a selected file?
Issue I’m using this to allow the user to select and upload a file: <input id=”fileInput” type=”file” ng-file-select=”onFileSelect($files)”> This correctly show: When user clicks ‘Upload’, I upload the file. When the user clicks ‘Remove’, how do I clear out the
Continue readingGet the content of the file by using angular-file-upload
Issue I create an input for file upload by angular-file-upload – <input type=”file” nv-file-select=”” uploader=”uploader” multiple /> I upload a sample json file – { name: “Alice” } and I want to see its content on the onAfterAddingFile event –
Continue readingAngularJS $http POST turn into GET
Issue I have a route Route::post(‘/updateLogo’, ‘CaptivePortalController@updateLogo’); Then I make a POST here $http({ method: ‘POST’, <—– I did a POST url: ‘/updateLogo’, headers: { ‘Content-Type’: undefined }, transformRequest: function (data) { console.log(“data coming into the transform is “, data);
Continue readingFile upload not working in AngularJS
Issue Here’s my code in my controller file that is suppose to grab the values of each input element (name, price, date, image) and push it into an array of objects… $scope.addBook = function(name, price, date, image) { name =
Continue readingFile drag and drop functionality in Angular js/MVC not working
Issue I am trying to implement a simple file drag and drop functionality in Angular js/MVC. I created a directive for the drag and drop. (function (angular, undefined) { ‘use strict’; angular.module(‘fileupload’, []) .directive(“myDirective”, function ($parse) { return { restrict:
Continue readingUnknown provider: $uploadProvider <- $upload
Issue Anyone know why I’m getting Unknown provider on this Angular code ? I am using the Angular File Upload directive and are using this example : http://www.mono-software.com/blog/post/Mono/233/Async-upload-using-angular-file-upload-directive-and-net-WebAPI-service/ Just cannot seem to figure out why I’m getting this error… module.js
Continue readingangular-file-upload async filter in angularjs
Issue I’m using angular-file-upload to upload files, where I’m writing a filter in which I need to take headers from the csv file selected for upload & match them with headers from some API. I’m able to get headers from
Continue readingAngular 1.x typescript "TypeError: "Uploader" must be an instance of FileUploader"
Issue I have been trying to use the angular-file-upload here https://github.com/nervgh/angular-file-upload with typescript, and I keep getting this error: TypeError: “Uploader” must be an instance of FileUploader I have to put a declare module and export namespace on the actual
Continue readingHow to intercept angular-file-upload module file upload requests using http interceptor
Issue the HTTP interceptor not intercepting the file upload calls from the nervgh/angular-file-upload , how can intercept those calls. I am adding HTTP authentication Headers to all my api calls, But these angular file upload calls are not intercepted and
Continue readingHow to re upload the same file twice using angular-file-upload (nervgh/angular-file-upload)
Issue im using angular-file-upload module for uploading files in my angular application , but i have requirement like upload the same file again , but not able to upload again , as module checks the isUploaded property of item(file) before
Continue readingAngular-File-Upload does not work with Internet Explorer
Issue I am using Angular File Upload library. https://github.com/nervgh/angular-file-upload and I have been successful in implementing,works in all browsers except Internet Explorer. I am using Internet explorer 11 and I have implemented a fix suggested on the nervgh/afu site which
Continue readingHow can I set authorization header in Angular filemanager
Issue I am using angular-filemanager in my project. Is it possible to set the authorization header? I use a bearer token and the server needs the following header: “Authorization” “Bearer [token]” I want to use token to prevent open file
Continue readingHow to detect file name exist on upload in Angular file manager
Issue I’m using Angular File Manager In My current Angularjs App. I want to show an error(like: file name exist) to user when upload a file with name exist in a directory. $scope.uploadFiles = function () { /******* I added
Continue readinghow to upload a file in Restangularjs using multipart/formdata
Issue my html code <form method=”post” enctype=”multipart/form-data” ng-controller=”commentCtrl” name=”form”> <a href=”” type=”file” class=”custom-height”><img src=”source/assets/images/icons/icofileattached.png” class=”attachmentpng-height” ngf-select=”uploadFiles($file)” ng-model=”files”/></a> <md-button type=”submit” class=”md-raised custom-submit-button” ng-click=”MakeComments()”> SUBMIT </md-button> </form> Thanks for your help Solution This piece of code worked for me…. $scope.uploadFiles = function(file)
Continue readingAccess fileitem from child controller on parent controller in AngularJS
Issue I am using angular file uploader in child component and need to access the fileitem when onAfterAddingFile is fired. I have implemented binding in component. So far, I have tried this- Childcontroller: $onInit() { this.feedFileInfo = ‘abc’;//here it is
Continue readingAngular js Input type file – clear previously selected file
Issue I am using input type=”file” for my upload control using angular js. Everytime I click on browse, I do not want to see the previously selected file. By default,this seems to be retained. Can it be achieved by writing
Continue readingMultiple file upload in Angular appending only one file
Issue I’m facing a problem with multiple files upload in my Angular application. Here I am trying to append the multiple files in onSelectedFileMultiple($event) but only one file is selecting and if I choose another file it is getting replaced
Continue readingHow can I get the name of the file I'm uploading
Issue I’m using angular-file-uploader (https://www.npmjs.com/package/angular-file-uploader) to upload files and it works fine, but I can’t find a way to get the filename, I want something like assign it to a variable so I can use to download it later. I
Continue readingUpload File with Angular 4 does not work. Result undefind
Issue Upload File with Angular 4 does not work. Result undefined. The file information comes along with the event, however the FormData does not work and makes the result undefined. Html File <form #form=”ngForm” enctype=”multipart/form-data” novalidate> <input type=”file” id=”sef” name=”sef”
Continue readingangular Spring Boot File Upload Example
Issue I want to Upload File To Spring boot backend , How should I send Formdata as requestparam in postrequest, i tried following code angular service class code let headers=new HttpHeaders({ ‘Content-Type="multipart/form-data’ }) const formData:FormData=new FormData(); formdata.apend(‘file’,file); return this.http.post(uploaadfile,{params:{ file:formData,
Continue readingFile upload not working with angular and webmethod
Issue I am basically trying to upload a file using angular and a webmethod. I took the code from this blog but it does not work. The request is successfull as seen from fiddler but the web method never gets
Continue readingAngular 9 "Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. "
Issue I have this problem when i am trying to display selected image before upload image company.component.ts handleFileInput(file: File){ console.log(file); const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = event => { this.imageUrl = event.target.result; console.log(this.imageUrl); }; } HTML <input type="file"
Continue readingImport excel in angular 7 and save into database using node js
Issue I have a page to uploaded excel <div class=”form-group”> <label>Select file to upload.</label> <input type=”file” class=”form-control” (change)=”onFileChange($event);”> </div> <button type=”button” (click)=”Upload()” class=”btn btn-success pull-right”><i class=”fa fa-save fa-fw”></i> Upload File</button> Below is my upload() function and onFileChange() in component.ts onFileChange(event)
Continue reading