Docs > javascript

Javascript Installation and Configuration

Learn how to install and configure Javascript with MyImager.

Install MyImager

Simply install myimager using npm :

npm i myimager

Declare MyImager Environment Variables

Rename .env.example to .env.local and pass this two Variables to the myimager functions:

MYIMAGER_CLIENT_KEY=<Your MYIMAGER_CLIENT_KEY>
MYIMAGER_PROJECT_KEY=<Your MYIMAGER_PROJECT_KEY>

Use functions

After complet this steps we can use all function provided by myimager Example of sendOnMyimager():


<script>
    const fileInput = document.getElementById('fileInput');
    const fileDetails = document.getElementById('fileDetails');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');

    // Replace with actual MyImager client key and project key
    const MyImager_Client_Key = 'your_client_key_here';
    const Project_Key = 'your_project_key_here';

    fileInput.addEventListener('change', function(event) {
      const fileInput = event.target.files[0];

      if (fileInput) {
        // Update file details
        fileName.textContent = File Selected: "$"{fileInput.name};
        fileSize.textContent = Size: "$"{Math.round(fileInput.size / 1024)} KB;
        fileDetails.style.display = 'block';
      
        // Upload the file and get the URL
       const res= sendOnMyimager(fileInput, MyImager_Client_Key, Project_Key);
       console.log(res)
      }
    });

    // Simulate the upload and getting URL (you will need to implement this function)
    function sendOnMyimager(file, clientKey, projectKey) {
      // Simulate the upload process
      console.log('Uploading file:', file);
      console.log('Using Client Key:', clientKey);
      console.log('Using Project Key:', projectKey);

      // Simulate a successful upload and getting the URL
      setTimeout(() => {
        const uploadedUrl = 'https://myimager.com/your-uploaded-file-url';
        console.log('File uploaded successfully:', uploadedUrl);
        alert('File uploaded successfully! URL: ' + uploadedUrl);
      }, 2000);
    }
  </script>