# File upload progress

**URL:** <https://forum.elixirforum.com/t/file-upload-progress/1234>\
**Category:** Questions\
**Tags:** phoenix\
**Created:** [July 29, 2016, 5:32pm UTC](https://forum.elixirforum.com/t/file-upload-progress/1234 "2016-07-29T17:32:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/max/32/10962_2.png) [@Max](https://forum.elixirforum.com/u/Max)\
**Post date:** [July 29, 2016, 5:32pm UTC](https://forum.elixirforum.com/t/file-upload-progress/1234/1 "2016-07-29T17:32:34Z")

</div>

Hi,

i´m using `Plug.Upload`to upload files.

How can i capture the % to make a progress bar?

thanks

---

<div class="post-metadata">

**Author:** ![sysashi](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sysashi/32/11669_2.png) [@sysashi](https://forum.elixirforum.com/u/sysashi)\
**Post date:** [July 30, 2016, 12:08am UTC](https://forum.elixirforum.com/t/file-upload-progress/1234/2 "2016-07-30T00:08:30Z")

</div>

if you are asking about client side (js), then this would work fine, assuming you have an Upload controller that accepts post request on “/upload”

```elixir
...
function sendFIle(file) {
  var uri = "/upload";
  var xhr = new XMLHttpRequest();
  var fd = new FormData();
  xhr.open("POST", uri, true);

  xhr.upload.addEventListener("progress", function(e) {
    if (e.lengthComputable) {
      var percentage = Math.round((e.loaded * 100) / e.total);
    }
  }, false);

  fd.append('myFile', file);
  xhr.send(fd);
}
...

```

copied from MDN 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/max/32/10962_2.png) [@Max](https://forum.elixirforum.com/u/Max)\
**Post date:** [August 1, 2016, 9:13am UTC](https://forum.elixirforum.com/t/file-upload-progress/1234/3 "2016-08-01T09:13:08Z")

</div>

Thank you. But i don´t see the connection between Plug.upload and this script. I think i need something like [session.upload-progress](http://php.net/manual/de/session.upload-progress.php) from php in elixir.

---

<div class="post-metadata">

**Author:** ![sysashi](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sysashi/32/11669_2.png) [@sysashi](https://forum.elixirforum.com/u/sysashi)\
**Post date:** [August 1, 2016, 10:15am UTC](https://forum.elixirforum.com/t/file-upload-progress/1234/4 "2016-08-01T10:15:30Z")

</div>

AFAIK there is no such feature in current implementation of Plug.Session, and what if you want to store a session(all the session data) in encrypted cookie for example?  
So, basically you’ll have to write it.. Or using xhr request to send file(s) is another option