---
title: Basic Uploader JavaScript Settings
slug: solution-builder/basic-uploader-javascript-settings
docTags: 
createdAt: 2024-02-06T21:58:44.745Z
---

# Overview

For background information, see [Basic Uploader](docId:42tXkY0k3OLyTsWSglySh).

The Basic Uploader provides a standard user interface and publishing options using a `PUSH` or `PUT` request to upload the recorded video to your backend.

After the user completes a recording, they will see an optional form to enter a title and/or description for their recording and an "Upload" button to start the upload.

When the user clicks the "Upload" button, the ScreenPal application will make a request to your backend to the URL provided in the `basicupload.request.url`** **property using a `POST` request to send any title/description.  If not collecting title/description, a `GET` request is made.

```javascript
"basicupload.request.url":"http://.../MyUrlProvider"
```

The response from the MyUrlProvider script must be a single line of text with a URL where the actual mp4 video should be `POST` (or `PUT`).  For example, if you were using the S3 Amazon Example below, then the response returns a pre-signed Amazon S3 URL where permissions have be granted to allow the post.

```none
http://s3.amazonaws.com/.../basicupload.mp4?AWSAccessKeyId=actual_amazon_key_would_be_here
```

Once the ScreenPal application has this final URL, it will make a `POST` (or `PUT`) request with the body of the request being the mp4 file. The body is not encoded (like form data from a browser), but a raw mp4 file.

Take a look at the full list of [Basic Uploader Properties](docId\:S0KsAqafGNpfvbpnwMSLa) to see how to customize branding and message strings in the ScreenPal Recorder and Editor.

# Amazon S3 Upload Example

Here is an example PHP script that you can use to sign a URL and upload directly to Amazon S3.  To use this script you would set the following properties when launching.

```javascript
"basicupload.request.url": "http://.../basicuploadS3Upload.php",
"basicupload.post.method":"PUT",
"basicupload.post.extraheaders.1":"x-amz-acl:public-read",
```

In this case we also need an extra property to set an additional header which is sent to Amazon S3 with the `PUT` request to mark that this mp4 is publicly readable.

Here's an example `basicuploadS3Upload.php` which creates a signed URL that we can use to `PUT` the mp4 file on Amazon S3:

```php
<?php
// Requires this php library (https://pear.php.net/package/Crypt_HMAC).
require_once('Crypt/HMAC.php');
// If you are using the title/desc options then this request will be a POST and have these:
$title = $_POST['title'];
$desc = $_POST['description'];
// The result of this request must be a single string with the real URL to PUT the mp4 video file.
// In this example we are going to PUT to s3 bucket and folder:
echo createUrl("BUCKET/folder/video_name.mp4","PUT","video/mp4");
//
// Functions to create the signed URL to PUT in Amazon S3 button...
//
function createUrl($object, $method, $contentType) {
    $S3_URL = "http://s3.amazonaws.com/";
    $accessIdKey = "YOUR_S3_PUBLIC_KEY";
    $accessIdSecret = "YOUR_S3_PRIVATE_KEY";
    $expires = time() + 120; // They have 1 minutes to do the upload else this URL will expire
    // Note this will upload video with public-read so you can stream from the bucket. 
    $stringToSign = "$method\n\n$contentType\n$expires\nx-amz-acl:public-read\n/$object";
    $hasher =& new Crypt_HMAC($accessIdSecret, "sha1");
    $sig = urlencode(hex2b64($hasher->hash($stringToSign)));
    return "$S3_URL/$object?AWSAccessKeyId=$accessIdKey&Expires=$expires&Signature=$sig";
}
function hex2b64($str) {
    $raw = '';
    for ($i=0; $i < strlen($str); $i+=2) {
        $raw .= chr(hexdec(substr($str, $i, 2)));
    }
    return base64_encode($raw);
}
?>
```

# Save on Server Upload Example

The following example uses PHP to read the raw input stream of the `POST` request and writes it to a local file.

To use this script you'd set the following properties when launching:  

```javascript
"basicupload.request.url": "http://.../basicuploadSaveUpload.php",
```

The `basicuploadSaveUpload.php` script below reads the mp4 file from the request input stream and saves to a local file in `/tmp`, but it can be placed anywhere on the server that you have write permission:

```php
<?php
    /* data comes in on the stdin stream */
    $putdata = fopen(""php://input"", ""r"");
    $fp = fopen(""/tmp/test.mp4"", ""w"");
    /* Read the data 1 KB at a time and write to the file */
    while ($data = fread($putdata, 1024))
    fwrite($fp, $data);
    /* Close the streams */
    fclose($fp);
    fclose($putdata);
?>
```

# Customizing the Success Message

After the upload, a message is displayed to the user.  To provide a custom message to your users, change the upload success message by setting this property:

```javascript
properties: {     
    ...
    "basicupload.success.message": "Enter a custom html message here"
}
```

# Turning Off Autodelete

By default the recorder will remove the local recording from the computer after a successful upload.  If you would like the user to manage their own recordings using the ScreenPal Project Manager, then you can disable this feature by setting this property:

```javascript
properties: {
     ...
    "som.*.app.upload.deleteafter": false
}
```

# Sending the User to a URL

After a successful upload the ScreenPal application can open a URL by setting this property:

```javascript
properties: {     
    ...    
    "som.*.app.upload.onexit.action": "http://yoururl/" 
}
```

You can also return a URL as the text result of the `PUSH` (or `PUT`) upload in which case you can set the value to `gotoplayback` which will open that URL.

When setting this property the ScreenPal application will show a "Continue" button to the user after a successful upload and then open this URL when they click the "Continue" button.

# Launching the Editor (Without First Recording)

To launch the ScreenPal Video Manager without first requiring the user to make a recording, add the property `showManager: true` to the launch properties. For example:

```javascript
properties: {
    "showManager": "true",
     ...
}
```