Test the file upload functionality

Learn how to test the file upload functionality using BrowserStack Automate TurboScale.

The file upload functionality enables you to upload files to a web app. For example, submit documents for processing in various applications, upload videos or images to social media sites, upload cover letters and resumes to career sites, or attach files to emails. The functionality involves looking for a file on your computer and then uploading it.

On Automate TurboScale, you can test the file upload functionality of your web app using:

Files downloaded in the same Automate TurboScale session
Files from your computer

Selenium
Playwright

Test with downloaded files
Test with your files

Suppose your test includes downloading a file from the web. This file is downloaded to the following location on the BrowserStack remote computer:

Downloading a file from the web considerably slows down the execution of your test.

Copy

Within the same Automate TurboScale session, the file is available in later test steps. As a result, you can use the downloaded file to test your file upload feature.

When testing, you have to similarly modify your script to access the recently downloaded file and upload it to the web app you want to test. See the following sample scripts:

Selenium 4 W3C test scripts to test on desktops

```java
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.LocalFileDetector;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class JavaSample {

  public static final String AUTOMATE_USERNAME = "YOUR_USERNAME";
  public static final String AUTOMATE_KEY = "YOUR_ACCESS_KEY";
  public static final String URL = "https://hub-cloud.browserstack.com/wd/hub";

  public static void main(String[] args) throws Exception {
    DesiredCapabilities capabilities = new DesiredCapabilities();
    capabilities.setCapability("browserName", "Chrome");
    capabilities.setCapability("browserVersion", latest);
    HashMap<String, Object> browserstackOptions = new HashMap<String, Object>();
    browserstackOptions.put("os", "Windows");
    browserstackOptions.put("projectName", "Sample Test");
    browserstackOptions.put("buildName", "Sample_test");
    capabilities.setCapability("bstack:options", browserstackOptions);

    RemoteWebDriver driver = new RemoteWebDriver(new URL(URL), caps);
    driver.setFileDetector(new LocalFileDetector());
    driver.get("https://www.fileconvoy.com/");
    driver.findElement(By.id("upfile_0")).sendKeys("C:\\Users\\hello\\Documents\\audio\\first_noel.mp3"); //File path in remote machine
    driver.findElement(By.id("readTermsOfUse")).click();
    driver.findElement(By.name("upload_button")).submit();
    JavascriptExecutor jse = (JavascriptExecutor)driver;
    try {
    	WebDriverWait wait = new WebDriverWait(driver, 5);
    	wait.until(ExpectedConditions.presenceOfElementLocated(By.id("TopMessage")));
    	if(driver.findElementById("TopMessage").getText().contains("successfully uploaded")) {
    		jse.executeScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\": \"passed\", \"reason\": \"File uploaded successfully\"}}");
    	} else {
    		jse.executeScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\": \"failed\", \"reason\": \"File upload failed\"}}");
    	}
    }
    catch(Exception e) {
    	jse.executeScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\": \"failed\", \"reason\": \"File could not be uploaded in 5 seconds\"}}");
    }
    driver.quit();
  }
}
```

Copy

```csharp
using System;
using OpenQA.Selenium;
using OpenQA.Selenium.Remote;

namespace SeleniumTest
{
  class Program
  {
    static void Main(string[] args)
    {
      IWebDriver driver;
      ChromeOptions capabilities = new ChromeOptions();
      capabilities.BrowserVersion = latest;
      Dictionary<string, object> browserstackOptions = new Dictionary<string, object>();
      browserstackOptions.Add("os", "Windows");
      browserstackOptions.Add("projectName", "Sample Test");
      browserstackOptions.Add("buildName", "Sample_test");
      browserstackOptions.Add("userName", "YOUR_USERNAME");
      browserstackOptions.Add("accessKey", "YOUR_ACCESS_KEY");
      browserstackOptions.Add("browserName", "Chrome");
      capabilities.AddAdditionalOption("bstack:options", browserstackOptions);

      driver = new RemoteWebDriver(
        new Uri("https://hub-cloud.browserstack.com/wd/hub"), capabilities
      );
      driver.Navigate().GoToUrl("https://www.fileconvoy.com");
      IWebElement uploadFile = driver.FindElement(By.Id("upfile_0"));
      Console.WriteLine(driver.Title);
      String path = "C:\\Users\\hello\\Documents\\audio\\first_noel.mp3";   //File path in remote machine
      LocalFileDetector detector = new LocalFileDetector();
      var allowsDetection = driver as IAllowsFileDetection;
      if (allowsDetection != null)
      {
        allowsDetection.FileDetector = new LocalFileDetector();
      }
      uploadFile.SendKeys(path);
      driver.FindElement(By.Id("readTermsOfUse")).Click();
      driver.FindElement(By.Id("upload_button")).Click();
      driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(5);
      if (driver.FindElement(By.CssSelector("#TopMessage")).Text.Contains("successfully uploaded"))
      {
        ((IJavaScriptExecutor)driver).ExecuteScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\":\"passed\", \"reason\": \"File uploaded successfully!\"}}");
      }
      else
      {
        ((IJavaScriptExecutor)driver).ExecuteScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\":\"failed\", \"reason\": \"File upload failed!\"}}");
      }
      driver.Quit();
    }
  }
}
```

Copy

If you want to use your own files for a test, there are two ways to do it:

Upload files from your computer to the remote BrowserStack computer during the test.
Preload files from your computer to the BrowserStack server, and then access the files during the test.

You can upload up to 10 media files to the BrowserStack server. By default, files are deleted from the server after 30 days from the date of upload.

Upload files to the remote computer

You can upload files to the remote computer by adding these two methods in your test script:

Local File Detector, to detect files on a local computer
Send Keys, to specify the location of the files

The Local File Detector method works for testing on Windows and Linux computers.

See the following sample scripts for reference:

Selenium 4 W3C test scripts to test on desktops

```java
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.LocalFileDetector;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class JavaSample {

  public static final String AUTOMATE_USERNAME = "YOUR_USERNAME";
  public static final String AUTOMATE_KEY = "YOUR_ACCESS_KEY";
  public static final String URL = "https://hub-cloud.browserstack.com/wd/hub";

  public static void main(String[] args) throws Exception {
  DesiredCapabilities capabilities = new DesiredCapabilities();
  capabilities.setCapability("browserName", "Chrome");
  capabilities.setCapability("browserVersion", latest);
  HashMap<String, Object> browserstackOptions = new HashMap<String, Object>();
  browserstackOptions.put("os", "Windows");
  browserstackOptions.put("projectName", "Upload Files");
  browserstackOptions.put("buildName", "Upload_file");
  capabilities.setCapability("bstack:options", browserstackOptions);

    RemoteWebDriver driver = new RemoteWebDriver(new URL(URL), capabilities);
    driver.setFileDetector(new LocalFileDetector());
    driver.get("https://www.fileconvoy.com/");
    driver.findElement(By.id("upfile_0")).sendKeys("//local//file//path");
    driver.findElement(By.id("readTermsOfUse")).click();
    driver.findElement(By.name("upload_button")).submit();
    JavascriptExecutor jse = (JavascriptExecutor)driver;
    try {
    	WebDriverWait wait = new WebDriverWait(driver, 5);
    	wait.until(ExpectedConditions.presenceOfElementLocated(By.id("TopMessage")));
    	if(driver.findElementById("TopMessage").getText().contains("successfully uploaded")) {
    		jse.executeScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\": \"passed\", \"reason\": \"File uploaded successfully\"}}");
    	} else {
    		jse.executeScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\": \"failed\", \"reason\": \"File upload failed\"}}");
    	}
    }
    catch(Exception e) {
    	jse.executeScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\": \"failed\", \"reason\": \"File could not be uploaded in 5 seconds\"}}");
    }
    driver.quit();
  }
}
```

Copy

```csharp
using System;
using System.Text;
using OpenQA.Selenium;
using OpenQA.Selenium.Remote;

namespace SeleniumTest
{
  class Program
  {
    static void Main(string[] args)
    {
      Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);
      IWebDriver driver;
      ChromeOptions capabilities = new ChromeOptions();
      capabilities.BrowserVersion = latest;
      Dictionary<string, object> browserstackOptions = new Dictionary<string, object>();
      browserstackOptions.Add("os", "Windows");
      browserstackOptions.Add("projectName", "Upload Files");
      browserstackOptions.Add("buildName", "Upload_file");
      browserstackOptions.Add("userName", "YOUR_USERNAME");
      browserstackOptions.Add("accessKey", "YOUR_ACCESS_KEY");
      browserstackOptions.Add("browserName", "Chrome");
      capabilities.AddAdditionalOption("bstack:options", browserstackOptions);

      driver = new RemoteWebDriver(
        new Uri("https://hub-cloud.browserstack.com/wd/hub"), capabilities
      );
      driver.Navigate().GoToUrl("https://www.fileconvoy.com");
      IWebElement uploadFile = driver.FindElement(By.Id("upfile_0"));
      Console.WriteLine(driver.Title);
      String path = "//path//to//your//local//file";   //File path in your local machine
      LocalFileDetector detector = new LocalFileDetector();
      var allowsDetection = driver as IAllowsFileDetection;
      if (allowsDetection != null)
      {
        allowsDetection.FileDetector = detector;
      }
      uploadFile.SendKeys(path);
      driver.FindElement(By.Id("readTermsOfUse")).Click();
      driver.FindElement(By.Id("upload_button")).Click();
      driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(5);
      if (driver.FindElement(By.CssSelector("#TopMessage")).Text.Contains("successfully uploaded"))
      {
        ((IJavaScriptExecutor)driver).ExecuteScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\":\"passed\", \"reason\": \"File uploaded successfully!\"}}");
      }
      else
      {
        ((IJavaScriptExecutor)driver).ExecuteScript("browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\":\"failed\", \"reason\": \"File upload failed!\"}}");
      }
      driver.Quit();
    }
  }
}
```

Copy

Preload files to the BrowserStack server

When testing on Windows and Linux computers, the Local File Detector and the Send Keys methods do not work as expected in some cases. For such cases, BrowserStack has the following three-step workaround:

This method works for loading media files only, such as audio, image, and video files. You can test the file upload feature by uploading up to 5 files.

(1) Preload your media files to the BrowserStack server using the Upload media file REST API:

Copy

BrowserStack returns a media_url (hash ID) of each file that you upload:

Copy

(2) In your test script, specify the media_url for each file using the uploadMedia capability for the W3C protocol or the browserstack.uploadMedia for the JSON wire protocol:

Selenium 4 W3C

  
      Capability
      Description
      Values
    
      uploadMedia
      Set this capability if you want to use your uploaded images, videos, or audios in the test. Upload your media files to BrowserStack servers using REST API. Use the media_url value returned as a result of the upload request to set this capability.
      The media_url returned on successful upload. 
 Example: ["media://hashedid", "media://hashedid"]

Capability	Description	Values
`uploadMedia`	Set this capability if you want to use your uploaded images, videos, or audios in the test. Upload your media files to BrowserStack servers using REST API. Use the `media_url` value returned as a result of the upload request to set this capability.	The media_url returned on successful upload. Example: `["media://hashedid", "media://hashedid"]`

Code snippets showing how to set uploadMedia (Selenium W3C)

Copy

At the time of the test, each specified file is uploaded from the BrowserStack server to the BrowserStack remote computer or device used for the test. The remote directory to which a file is uploaded depends on the type of file. For example, if it’s an image file, it’s uploaded to /Documents/images on Mac and to C:\\Users\\hello\\Documents\\images\\ on Windows.

For a list of all directories where files are stored on a BrowserStack remote computer, see Test with preloaded files.

(3) Specify the corresponding fully qualified <MEDIA_DIRECTORY> location on the remote computer as the argument to the Send Keys method. The specified files on this <MEDIA_DIRECTORY> location are uploaded during the test to check the file upload functionality.

The following scripts show how to access a media file previously loaded to the BrowserStack server from a BrowserStack remote computer:

Selenium W3C test scripts for testing on desktops

```java
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.ie.InternetExplorerDriver;
import org.openqa.selenium.remote.DesiredCapabilities;

DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability("bstack:options", new JSONObject()
    .put("os", "Windows")
    .put("projectName", "Sample Test")
    .put("buildName", "Sample_test")
    .put("uploadMedia", new JSONArray().put("media://<FILE_HASHED_ID>"))
    .put("userName", "YOUR_USERNAME")
    .put("accessKey", "YOUR_ACCESS_KEY")
);
capabilities.setCapability("browserName", "Chrome");
capabilities.setCapability("browserVersion", latest);

WebDriver driver = new ChromeDriver(new URL("https://hub-cloud.browserstack.com/wd/hub"), capabilities);

try {
    driver.get("https://www.fileconvoy.com");
    WebElement uploadElement = driver.findElement(By.id("upfile_0"));
    uploadElement.sendKeys("C:\\Users\\hello\\Documents\\<MEDIA_FOLDER>\\<IMAGE_NAME>.<IMAGE_EXT>");
    ((JavascriptExecutor) driver).executeScript("document.getElementById('readTermsOfUse').click();");
    driver.findElement(By.name("upload_button")).submit();
    WebElement topMessage = driver.findElement(By.id("TopMessage"));
    if (topMessage.getText().contains("successfully uploaded")) {
        ((JavascriptExecutor) driver).executeScript('browserstack_executor: {"action": "setSessionStatus", "arguments": {"status":"passed","reason": "File upload successful"}}');
    } else {
        ((JavascriptExecutor) driver).executeScript('browserstack_executor: {"action": "setSessionStatus", "arguments": {"status":"failed","reason": "File upload failed"}}');
    }
} catch (Exception e) {
    ((JavascriptExecutor) driver).executeScript('browserstack_executor: {"action": "setSessionStatus", "arguments": {"status":"failed","reason": "Something wrong with script"}}');
} finally {
    driver.quit();
}
```

Copy

Supported file formats

The table below lists different types of media and non-media files that you can preload to the BrowserStack server:

  
      OS
      Max size
      Allowed type
    
      Linux
      15MB
      
.png, .jpg, .jpeg, .gif, .bmp, .bmpf

      Windows - 
Any supported browser
      15MB
      
.png, .jpg, .jpeg, .gif, .svg, .webp, .avif

OS	Max size	Allowed type
Linux	15MB	`.png`, `.jpg`, `.jpeg`, `.gif`, `.bmp`, `.bmpf`
Windows - Any supported browser	15MB	`.png`, `.jpg`, `.jpeg`, `.gif`, `.svg`, `.webp`, `.avif`

  
      OS
      Max size
      Allowed type
    
      Windows - 
Any supported browser
      50MB
      
.mp4, .webm, .3gp, .qt, .qtff, .ogg

      Linux
      50MB
      
.mp4, .mkv, .3gp, .3gpp

OS	Max size	Allowed type
Windows - Any supported browser	50MB	`.mp4`, `.webm`, `.3gp`, `.qt`, `.qtff`, `.ogg`
Linux	50MB	`.mp4`, `.mkv`, `.3gp`, `.3gpp`

  
      OS
      Max size
      Allowed type
    
      Windows
      15MB
      
.aac, .mp3, .wav

      Linux
      15MB
      
.mp3, .wav

OS	Max size	Allowed type
Windows	15MB	`.aac`, `.mp3`, `.wav`
Linux	15MB	`.mp3`, `.wav`

  
      OS
      Max size
      Allowed type
    
      Linux
      15MB
      
.zip, .xlsx, .xls, .pdf, .pnp, .csv, .html, .txt, .ppt, .doc, .docx, .tar, .rar

      Windows
      15MB
      
.zip, .xlsx, .xls, .pdf, .pnp, .csv, .html, .txt, .ppt, .doc, .docx, .tar, .rar

OS	Max size	Allowed type
Linux	15MB	`.zip`, `.xlsx`, `.xls`, `.pdf`, `.pnp`, `.csv`, `.html`, `.txt`, `.ppt`, `.doc`, `.docx`, `.tar`, `.rar`
Windows	15MB	`.zip`, `.xlsx`, `.xls`, `.pdf`, `.pnp`, `.csv`, `.html`, `.txt`, `.ppt`, `.doc`, `.docx`, `.tar`, `.rar`

BrowserStack allows you to test the Playwright’s file upload functionality using the setInputFiles method of the locator element that enables file transfers from your machine to the BrowserStack remote browser. The locator.setInputFiles(files[, options]) method should always point the first argument to a file type.

Upload files from your machine

The following code example shows how the setInputFiles method is used to upload a file:

'use strict';
const {chromium} = require('playwright');
const {promisify} = require('util');
const sleep = promisify(setTimeout);

(async () => {
  const caps = {
    build: 'Playwright testing',
    browser: "chrome",
    'browserstack.username': process.env.BROWSERSTACK_USERNAME || 'YOUR_USERNAME',
    'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || 'YOUR_ACCESS_KEY'
    'browserstack.networkLogs': true,
    'browserstack.console': 'errors',
  };

  const browser = await chromium.connect({
    wsEndpoint: `wss://hub-cloud.browserstack-ats.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`,
  });
  const context = await browser.newContext({ignoreHTTPSErrors: true});
  const page = await context.newPage();

  await page.goto('https://www.fileconvoy.com/');
  const fileChooserPromise = page.waitForEvent('filechooser');
  await page.locator('input[name=\"upfile_0\"]').click();
  const fileChooser = await fileChooserPromise;
  await fileChooser.setFiles('/provide/absolute/path/to/file.name'); // Provide absolute path 
  await page.locator('input[name=\"readTermsOfUse\"]').check();
  await page.locator('input[name=\"upload_button\"]').click();

  await sleep(1*60*1000);
  await browser.close();
})();

Did this page help you?

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback

Is this page helping you?

Yes

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback!