Skip to content

Uploading Files and Using URLs

📄 Uploading Files and Using URLs in HTML

🔼 Uploading a File

To upload a file in the Admin Portal:

  • Log in to the Admin Portal.
  • Navigate to Manage Entities.
  • Click the File Repository menu option.
  • On the File Repository page, click Select New File.
  • Choose the file you want to upload, then click the Upload button.
  • Once the upload completes, either refresh the page or click the Back button.
  • The uploaded file will now appear in the table along with details like:
  • File Name
  • File Type
  • File Size
  • File ID
  • File URL

In the Actions column, click the Copy icon next to the file. This copies the public file URL to your clipboard.
You can now paste and use the file URL wherever needed.

🔗 Using the File URL in HTML

After uploading a file in the Admin Portal and copying the public URL, you can use it in your HTML code for various purposes such as embedding images, linking documents, or playing videos. Below are some examples and best practices.

1. Embedding an Image

To display an image using the uploaded file URL:

<img src="https://yourdomain.com/uploads/image.jpg" alt="Description of the image" />

Replace the src attribute value with your actual file URL. Always provide an alt attribute for accessibility and SEO.

2. Linking a Document for Download

To create a clickable link for downloading a file (PDF, DOCX, ZIP, etc.):

<a href="https://yourdomain.com/uploads/file.pdf" download>Download File</a>

The download attribute instructs the browser to download the file instead of opening it.

3. Embedding a Video

To embed and play a video file directly on your webpage:

<video controls width="640" height="360">
  <source src="https://yourdomain.com/uploads/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Ensure the video format is supported by browsers (e.g., MP4 for wide compatibility).

4. Embedding an Audio File

To embed audio content such as MP3 or WAV files:

<audio controls>
  <source src="https://yourdomain.com/uploads/audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

5. Using in JavaScript or CSS (Advanced)

You can also use the file URL dynamically within JavaScript or as a background image in CSS:

JavaScript Example:

document.getElementById('myImage').src = "https://yourdomain.com/uploads/image.jpg";

CSS Example:

.hero-banner {
  background-image: url('https://yourdomain.com/uploads/banner.jpg');
}

💡 Note: Make sure the file is publicly accessible. Test the URL in a new browser tab before using it in production code.