Uploading a .png file using javascript with a hidden file upload question.

Hi, I think with Qualtrics there are 2 ways to upload images to the dataset. One would be to use the File Upload question type. The other would be to use the Signature question type. The Signature question type is actually already pretty suited to handle drawing images. I've modified this question type to expand the signature box, hide the sign line and X, and created a canvas on top of it that supports changing color and brush width.

To give it a try, first create a Signature question. Set the Box size to “Large” and disable the “Show ‘sign here’” toggle.

Then, use the Rich Content Editor’s HTML/Source view “<>” to update the Question Text with the below:

<input type="color" class="js-color-picker  color-picker"> <input value="1" type="range" min="1" max="72" class="js-line-range"> <label class="js-range-value">1</label>Px<br>
<br>
Please draw below:

Then, add the following to the OnLoad section of the question’s JavaScript to create the canvas:

var qid = this.questionId;
const canvas = document.getElementById(qid+'-Signature')
const context = canvas.getContext("2d");

canvas.height = 300;
canvas.width = 800;

const colorPicker = document.querySelector( '.js-color-picker');

colorPicker.addEventListener( 'change', event => {
    context.strokeStyle = event.target.value; 
} );

const lineWidthRange = document.querySelector( '.js-line-range' );
const lineWidthLabel = document.querySelector( '.js-range-value' );

lineWidthRange.addEventListener( 'input', event => {
    const width = event.target.value;
    lineWidthLabel.innerHTML = width;
    context.lineWidth = width;
} );

context.lineCap = "round";
context.lineJoin = "round";



/*Drawing the lines*/

let drawing = false;

function startDrawing(e) {
    drawing = true;
    context.beginPath();
}

window.addEventListener("mousedown", startDrawing);
window.addEventListener("touchstart", startDrawing);

function endDrawing(e) {
    drawing = false;
}

window.addEventListener("mouseup", endDrawing);
window.addEventListener("touchend", endDrawing);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect(),
      scaleX = canvas.width / rect.width,
      scaleY = canvas.height / rect.height;

    return {
      x: (evt.clientX - rect.left) * scaleX,
      y: (evt.clientY - rect.top) * scaleY
    }
}

function draw(e) {
    if (!drawing) return;

    let { x, y } = getMousePos(canvas, e);

    context.lineTo(x, y);
    context.stroke();
}

window.addEventListener("mousemove", draw);
window.addEventListener("touchmove", draw);

function startDrawing(e) {
    drawing = true;
    context.beginPath();
    draw(e);
}

Finally, add the below CSS to the Style section of the survey’s Look & Feel:

@media (min-width: 480px) {
 .SignatureBox {
 width: 1200px !important;
 height: 450px !important;
}
}

.SignLine, .SignatureX {
display: none;
}

Thank you so much Tom, could you please also let me know where did you get the color picker?

Thank you so much Tom, I’ll give it a try😀

Is there a way to also change the size of the signature box, e.g.  canvas.height = 800; canvas.width = 300; such that it is flipped?