Back ArrowExplore all kits

How to use AngularJS ngFileUpload module to upload files in the app

share link

by vsasikalabe dot icon Updated: Apr 7, 2023

technology logo
technology logo

Solution Kit Solution Kit  

The uploading of the file is an essential feature to make a form that stores some kind of data. This component is used in web applications where the image is getting uploaded or in file sharing. This file-upload component provides a shareable link by using the file.io API. Also, we can send get requests to a shareable link. But now we only focus on the upload section.


We have to create a new class using the Angular CLI command (ng g cl) that represents a file to upload. The ng-app is a directive of AngularJS that indicates the div tag element (content) is the owner of the application. This directive attaches the value of the input field to our application. And also binds the content of the p tag element to the application variable. We have declared our app title as fileUpload. We have used controller-as syntax (ng-controller="MyCtrl as up"). So that our form is named as name="up.upload_form".

Next, we have added an input type, which will allow us to select files. We have added some of the directives from ng-file-upload.

  • ngf-select- It shows the type of selection. Drag and drop is also available.
  • ngf-pattern - This is used to match, the type of file. (eg:”‘image/*’” for images)
  • ngf-max-size -We can fix the maximum size of the file to be uploaded.

Next, using the ngf-thumbnail directive we are displaying the thumbnail of the selected file. Finally, we have the submit button.


This is an example of how to use AngularJS ngFileUpload module to upload files in the app:

Fig: Preview of the output that you will get on running this code from your IDE.

Code

In this solution, we are using ngFileUpload module.

file upload using angularjs without $scope

JavaScriptdotLines of Code : 32dotLicense : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries : 
npm install ng-file-upload 

<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
<script src="ng-file-upload(.min).js"></script>


Upload on form submit or button click
<form ng-app="fileUpload" ng-controller="MyCtrl" name="form">
  Single Image with validations
  <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
    ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" 
    ngf-resize="{width: 100, height: 100}">Select</div>
  Multiple files
  <div class="button" ngf-select ng-model="files" ngf-multiple="true">Select</div>
  Drop files: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
  <button type="submit" ng-click="submit()">submit</button>
</form>

Upload right away after file selection:
<div class="button" ngf-select="upload($file)">Upload on file select</div>
<div class="button" ngf-select="uploadFiles($files)" multiple="multiple">Upload on file select</div>
  Drop File:
<div ngf-drop="uploadFiles($files)" class="drop-box"
  ngf-drag-over-class="'dragover'" ngf-multiple="true" 
  ngf-pattern="'image/*,application/pdf'">Drop Images or PDFs files here</div>
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>

Image thumbnail: <img ngf-thumbnail="file || '/thumb.jpg'">
Audio preview: <audio controls ngf-src="file"></audio>
Video preview: <video controls ngf-src="file"></video>

Instructions

Follow the steps carefully to get the output easily.

  1. Install Visual Studio Code on your computer.
  2. Open the terminal, and install Angular using this command-'npm install -g @angular/cli'.
  3. Create a new folder using the command-'ng new folder_name'.
  4. If you are getting an error for ng then, add set-ExecutionPolicy RemoteSigned -Scope CurrentUser, Get-ExecutionPolicy, and Get-ExecutionPolicy -list in the terminal one by one.
  5. Now, Create a new folder using the command-'ng new folder_name'.
  6. Choose yes to all the questions and choose SCSS for the stylesheet format.
  7. cd foldername
  8. Copy the code using the Copy button above and paste it into your index.html file under src.
  9. Open the terminal and install ngFileUpload using npm install ng-file-upload command.
  10. Remove the first line of the code.
  11. Save the file and open the terminal, Run the Code using this command-'ng serve' to generate the output in localhost.


I hope you found this helpful.


I found this code snippet by searching for ' file upload using angularjs without $scope' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created and tested in Visual Studio Code 1.74.1.
  2. The solution is tested in Angular CLI - 15.2.2.
  3. angular animations version - 15.2.0.
  4. ng-file-upload - 12.2.13.


Using this solution, we are able to upload the file using angularjs without $scope with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to upload the file using angularjs without $scope.


Dependent Libraries

angular-appby angular-app

JavaScript doticonstar image 5888 doticonVersion:Currentdoticon
License: Permissive (MIT)

Reference application for AngularJS

Support
    Quality
      Security
        License
          Reuse

            angular-appby angular-app

            JavaScript doticon star image 5888 doticonVersion:Currentdoticon License: Permissive (MIT)

            Reference application for AngularJS
            Support
              Quality
                Security
                  License
                    Reuse

                      ng-file-uploadby danialfarid

                      JavaScript doticonstar image 7979 doticonVersion:12.2.13doticon
                      License: Permissive (MIT)

                      Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support

                      Support
                        Quality
                          Security
                            License
                              Reuse

                                ng-file-uploadby danialfarid

                                JavaScript doticon star image 7979 doticonVersion:12.2.13doticon License: Permissive (MIT)

                                Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support
                                Support
                                  Quality
                                    Security
                                      License
                                        Reuse

                                          If you do not have the angular and ng-file-upload that are required to run this code, you can install them by clicking on the above link.

                                          You can search for any dependent library on kandi like angular and ng-file-upload.

                                          Support

                                          1. For any support on kandi solution kits, please use the chat
                                          2. For further learning resources, visit the Open Weaver Community learning page.

                                          See similar Kits and Libraries

                                          Open Weaver – Develop Applications Faster with Open Source

                                          kandi

                                          Community and Support

                                          Company

                                          Follow

                                          • © 2023 Open Weaver Inc.