Track when a file is uploaded to your JavaScript application

LogSnag makes it easy to monitor your JavaScript application and track when a new file is uploaded.

Many JavaScript applications require users to upload files. This can be a simple text file, a CSV file, or even a PDF file to be processed for further use. Or in some cases, it can be some sort of media files such as an image, audio, or video file to be transformed and uploaded to cloud storage such as S3 or Google Cloud Storage.

In such cases, you might want to track when a user uploads a file in your JavaScript application and optionally notify you and your team when a user uploads a file. This way, you can always be aware of the activity in your application and take immediate action if needed.

Fortunately, here at LogSnag, we have created a powerful solution for this problem. LogSnag is a powerful, real-time event tracking tool that works seamlessly with any JavaScript application. With LogSnag, you can set up event tracking for anything you want and track when a user uploads a file in your JavaScript application in real time. In addition, LogSnag allows you to track user journeys and create a timeline of events for each user. This way, you can always track the activity of a specific user, such as when they have uploaded files and any other activity they have done in your application.


Setting up LogSnag

  1. Sign up for a free LogSnag account.
  2. Create your first project from the dashboard.
  3. Head to settings and copy your API token.

JavaScript code snippets

To monitor when a user uploads a file in your JavaScript application, you can use the following code snippet. Make sure that you have replaced the API token and project name with your own.

Using JavaScript with Fetch
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Bearer YOUR_API_TOKEN");

var raw = JSON.stringify({
  "project": "my-saas",
  "channel": "files",
  "event": "Changed Profile Picture",
  "description": "User has uploaded a new profile picture",
  "icon": "🖼",
  "notify": true
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://api.logsnag.com/v1/log", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));
Using JavaScript with jQuery
var settings = {
  "url": "https://api.logsnag.com/v1/log",
  "method": "POST",
  "timeout": 0,
  "headers": {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_TOKEN"
  },
  "data": JSON.stringify({
    "project": "my-saas",
    "channel": "files",
    "event": "Changed Profile Picture",
    "description": "User has uploaded a new profile picture",
    "icon": "🖼",
    "notify": true
  }),
};

$.ajax(settings).done(function (response) {
  console.log(response);
});
Using JavaScript with XHR
// WARNING: For POST requests, body is set to null by browsers.
var data = JSON.stringify({
  "project": "my-saas",
  "channel": "files",
  "event": "Changed Profile Picture",
  "description": "User has uploaded a new profile picture",
  "icon": "🖼",
  "notify": true
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://api.logsnag.com/v1/log");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer YOUR_API_TOKEN");

xhr.send(data);

JavaScript integration details

We believe that event tracking should be simple and accessible to every developer and team. Therefore, we have worked hard to create the next generation of event tracking tools. As a result, LogSnag is flexible and easy to use, making it a great companion for your JavaScript applications.

In addition to real-time event tracking, LogSnag provides powerful features such as cross-platform push notifications, event filtering, user and product journeys, charts, insights, and more.

LogSnag provides a generous free plan to get you started with event tracking. You can also check out our pricing page to see our paid plans. So don't hesitate to give us a try and let us know what you think!

Other use-cases for LogSnag

  1. Track payment events via JavaScript

  2. Track user signup events via JavaScript

  3. Track your JavaScript cron jobs

  4. Track waitlist signup events via JavaScript

  5. Track user sign in events in JavaScript

  6. Get a notification when your JavaScript code is done executing

  7. Monitor when a user exceeds the usage limit for your JavaScript service

  8. Monitor when a new feature is used in your JavaScript application

  9. Monitor suspicious activity in your JavaScript application

  10. Monitor when a user is being rate limited in your JavaScript application

  11. Monitor when database goes down in your JavaScript application

  12. Monitor your CPU usage in your JavaScript application

  13. Monitor memory usage in your JavaScript application

  14. Monitor high disk usage in your JavaScript application

  15. Track when a form is submitted to your JavaScript application

  16. Track canceled subscriptions in your JavaScript application

  17. Monitor failed payments for your JavaScript application

  18. Monitor your CI/CD build status for your JavaScript application

  19. Monitor when a user changes their email address in your JavaScript application

    View all common use-cases with JavaScript