En este artículo os explicaremos cómo subir archivos a una aplicación web desarrollada con ASP.net 5 usando la API de HTML5 para este cometido. Muchos de los ejemplos de subidas de ficheros implementados con HTML5 usan la acción "HttpContext.Current.Request.Files" la cual no es soportada por ASP.net 5. Una alternativa bastante válida es usar la librería iFormFile, que funciona perfectamente para subida de archivos de forma eficiente, pero si recurrimos a la forma tradicional de hacerlo, es decir, con un formulario y recargando la página. Pero si queremos subir archivos por AJAX, esto no funciona. Tenemos que recurrir a otro método para que la subida, tal y como nosotros queremos, funcione correctamente.
Buscando y buscando, vi un post en otra web en la que se mencionaba que se necesitaba leer el contenido del cuerpo, para guardarlo después utilizando la secuencia de dicho archivo. Pero cuando lo llevé a cabo en mi proyecto, tampoco me funcionó. Después me enteré de que el cuerpo contiene el filename y el tipo de contenido, tal y como os muestro a continuación:
Aunque conozcas el tipo de contenido del fichero y su filename, al guardar la secuencia del archivo no podrás crear una imagen válida similar. Necesitas un parser para analizar el contenido. Inicialmente pensé en implementar uno yo mismo, pero más tarde me encontré con uno que ya está disponible para usar en CodePlex - Multipart Form Data Parser. Usando este parser se puede analizar el cuerpo del fichero y obtener así el filename, el tipo de contenido y, sobretodo, su contenido.
Aquí podéis ver el código completo:
Formulario HTML
<code class="language-html" data-lang="html"><span class="lineno">1</span> <span class="nt"><form</span> <span class="na">id=</span><span class="s">"UploadForm"</span> <span class="na">asp-action=</span><span class="s">"upload"</span> <span class="na">asp-controller=</span><span class="s">"home"</span><span class="nt">></span> <span class="lineno">2</span> <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">name=</span><span class="s">"UploadFile"</span> <span class="na">id=</span><span class="s">"UploadFile"</span> <span class="na">accept=</span><span class="s">"image/*"</span> <span class="nt">/></span> <span class="lineno">3</span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="nt">/></span> <span class="lineno">4</span> <span class="nt"></form></span></code>
Subir archivos con AJAX
Y aquí está el script, que se encarga de la subida de ficheros con AJAX
<code class="language-javascript" data-lang="javascript"><span class="lineno"> 1</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#UploadForm"</span><span class="p">).</span><span class="nx">submit</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="lineno"> 2</span> <span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormData</span><span class="p">();</span> <span class="lineno"> 3</span> <span class="kd">var</span> <span class="nx">selectedFiles</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#UploadFile"</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">files</span><span class="p">;</span> <span class="lineno"> 4</span> <span class="nx">data</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">selectedFiles</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span><span class="p">,</span> <span class="nx">selectedFiles</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span> <span class="lineno"> 5</span> <span class="lineno"> 6</span> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span> <span class="lineno"> 7</span> <span class="nx">type</span><span class="o">:</span> <span class="s2">"POST"</span><span class="p">,</span> <span class="lineno"> 8</span> <span class="nx">url</span><span class="o">:</span> <span class="s2">"/home/Upload"</span><span class="p">,</span> <span class="lineno"> 9</span> <span class="nx">contentType</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="lineno">10</span> <span class="nx">processData</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="lineno">11</span> <span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">,</span> <span class="lineno">12</span> <span class="nx">success</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span> <span class="lineno">13</span> <span class="nx">alert</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span> <span class="lineno">14</span> <span class="p">},</span> <span class="lineno">15</span> <span class="nx">error</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="lineno">16</span> <span class="nx">alert</span><span class="p">(</span><span class="s2">"There was error uploading files!"</span><span class="p">);</span> <span class="lineno">17</span> <span class="p">}</span> <span class="lineno">18</span> <span class="p">});</span> <span class="lineno">19</span> <span class="lineno">20</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="lineno">21</span> <span class="p">});</span></code>
Controlador
Y aquí tenéis el código del controlador.
<code class="language-csharp" data-lang="csharp"><span class="lineno"> 1</span> <span class="na">[HttpPost]</span> <span class="lineno"> 2</span> <span class="k">public</span> <span class="n">IActionResult</span> <span class="nf">Upload</span><span class="p">()</span> <span class="lineno"> 3</span> <span class="p">{</span> <span class="lineno"> 4</span> <span class="n">MultipartParser</span> <span class="n">multipartParser</span> <span class="p">=</span> <span class="lineno"> 5</span> <span class="k">new</span> <span class="nf">MultipartParser</span><span class="p">(</span><span class="k">new</span> <span class="n">StreamReader</span><span class="p">(</span><span class="n">Request</span><span class="p">.</span><span class="n">Body</span><span class="p">).</span><span class="n">BaseStream</span><span class="p">);</span> <span class="lineno"> 6</span> <span class="k">if</span><span class="p">(</span><span class="n">multipartParser</span><span class="p">.</span><span class="n">Success</span><span class="p">)</span> <span class="lineno"> 7</span> <span class="p">{</span> <span class="lineno"> 8</span> <span class="kt">var</span> <span class="n">bytes</span> <span class="p">=</span> <span class="n">multipartParser</span><span class="p">.</span><span class="n">FileContents</span><span class="p">;</span> <span class="lineno"> 9</span> <span class="p">}</span> <span class="lineno">10</span> <span class="lineno">11</span> <span class="k">return</span> <span class="nf">Json</span><span class="p">(</span><span class="s">"Uploaded"</span><span class="p">);</span> <span class="lineno">12</span> <span class="p">}</span></code>
Y aplicando estos conocimientos tendréis vuestra subida de ficheros implementada con ASP.net y con tecnología AJAX. Ya sabéis que con AJAX podéis conectar con el entorno del servidor haciendo una petición desde tecnologías clientes como Javascript. Así se optimiza la velocidad de la aplicación y acciones tan tediosas para el usuario como puede ser esta que te mostramos hoy, es decir, la carga de ficheros, se desarrollan a una velocidad de vértigo.
Esperamos que este tutorial te haya sido de utilidad y sepas aplicarlo a tus futuros proyectos. Pensando un poco en esto, ¿qué más tutoriales sobre ASP.net quieres ver en esta web? ¿Tienes alguna duda sobre algo que te está dando problemas en ASP.net? No lo dudes e indícanoslo en los comentarios.
Fuente: Anuraj Parameswaran