As you can see, we retrieve an array of all of the files form our MultiFileUploadComponent by first getting a reference to it using and then calling the getFiles method we created. Now to send the files off to a server somewhere, we could call this upload function from the template. Modify src/app/components/multi-file-upload/multi-file-upload.ts to reflect the following: import
#Input file upload example code#
We will add the code for the various files and then talk through what is happening. Now let's work on implementing the upload component itself. This allows us to assemble all of the data we want to send programmatically in a set of key/value pairs. Instead, we are manually creating a FormData object and assigning values to it.Ĭreating this FormData object manually basically just mimics the way data would be submitted through a standard if its encoding type was set to multipart/form-data. It is not really important to understand the particulars of how this all works behind the scenes, but it is useful to understand that there is a reason for the existence of these different encoding types.Īs you will see in the following section, we don't actually set up the multipart/form-data encoding type on our form (in fact, we don't use a form at all).
This method for sending data is more robust, but it does have more overhead than the simpler URL encoded approach.
It allows for sending key/value pairs where we can associate a different value with each key. Using multipart/form-data allows us to send more complex data which is required for transmitting files. Generally, when data is submitted through forms, that data is sent using the default application/x-When data is sent with the default encoding it is basically treated like a long query string that you would be able to send through a URL. Specifically, we will want to understand the difference multipart/form-data (which we will be using) and the more generic application/x-Understanding Multipart Form Data Before we do that, I think it is important to have a basic understanding of the different ways in which we can encode and send data through forms. With the component generated, we can start to work through implementing the functionality. Run the following command to create the component: ionic g component components/MultiFileUpload However, we will be building out a few more features around this functionality, so we are going to bundle that into its own component. This is not the path to read to get at the actual data that was uploaded (see. The filename provided by the web browser. A ame that contains one row for each selected file, and following columns: name. You could just use these directives directly in your templates. Whenever a file upload completes, the corresponding input variable is set to a dataframe. It is not entirely necessary to create a custom component. The ng2FileDrop directive will allow us to create an area where a user can drag and drop multiple files, and the ng2FileSelect directive will allow us to create a standard input button that allows for selecting multiple files. This package will provide us with two directives.
#Input file upload example install#
In order to install that, you will need to run the following command in your project: npm install -save ng2-file-upload Install ng2-file-uploadĪs I mentioned, we will be using the ng2-file-upload package to provide the functionality we will be making use of. If you want a much more detailed guide for learning Ionic, then take a look at Building Mobile Apps with Ionic. If you're not familiar with Ionic already, I'd recommend reading my Ionic Beginners Guide first to get up and running and understand the basic concepts.
You must also already have Ionic set up on your machine, and an Ionic project created. Create the Multi-File Upload Componentīefore you go through this tutorial, you should have at least a basic understanding of Ionic concepts. In addition to the above code, the following Javascript library files are loaded for use in this example: The Javascript shown below is used to initialise the table shown in this example: var editor // use a global for the submit and return data rendering in the examples
0 kommentar(er)
