Question

Clear / Reset a file upload field

Workflow Forms

Updated August 29, 2024

asked on October 24, 2017

Hi All,

In my Forms process I need to execute multiple times a Forms Payment. On that form I have a file upload field for receipts. When my process loops through that same Form, I would like to clear / reset the previous files that were entered. I am currently using a workflow to clear other fields but I don't have access to the file upload field via a workflow. How can I reset that field using JavaScript? Would even be better using the workflow!

Thanks,

1 0

Answer

SELECTED ANSWER

replied on October 31, 2017 • Show version history

I see, thank you for the clarification. To try to solve the Parsley Validation, maybe we can try below steps:

1. delete all the files from the existing field, in addition to removing the tds inside the tr, you also need to remove the css class of the tr,

$('table.files>tbody>tr').removeClass('file');

Or you can just delete the whole table rows:

$('table.files>tbody>tr').remove();

2. set the file inputs for uploading fields as required, removes the "hasFiles" class for the inputs.

$('input.fileuploader').attr('required', "required");

3. remove the css class from the input:

$('input.fileuploader').removeClass('hasFiles");

To sum up, try:

$(document).ready(function(){
    $('table.files>tbody>tr').remove();
    $('input.fileuploader').attr('required', "required");
    $('input.fileuploader').removeClass('hasFiles");
}

Another option is that you can try to show a loading screen, update the page in the background, and have the delete file clicks trigger occur and when it's done show the form.

1 0

Replies

replied on October 24, 2017

Hi Pierre,

Try this to remove the attachments on form load:

$(document).ready(function(){
  $('table.files>tbody>tr>td').remove(); 
});

2 0

replied on August 29, 2024

Thank You!!!

Coming in handy 7 years later.

0 0

replied on October 24, 2017

This works great!

If the File Upload is mark as required, when I submit the form again without uploading a file, I get the following error:

Laserfiche Forms has encountered a problem.

Errors encountered during forms submission:
Field Name: Credit Card receipt, Position: 19, Error: This value is required. [LFF9300-ValueRequired] [LFF9312-ErrorOccuredDuringFormsValidation]
You can click the back button on the browser to correct and resubmit the form. [LFF9320-FormsValidationAggregateException]

Do I need to do something with the Parsley Validator to make it working again?

Thanks

0 0

replied on October 25, 2017

This exception is thrown from back-end, if a field is designed to be required, it needs to have a value, in your case, you need at least one file uploaded. Whether the field is required is saved in database, and it's not affected from the data sent from front-end. So there might not be anything to do with Parsley Validator, maybe you could change the file upload field to not required? since you don't have a value for it.

0 0

replied on October 30, 2017

Let use a simple flow like this one:

If a form is filled with all the required information the first time. Also at least one file was uploaded!

If for a reason your submission is rejected and comes back to the previous task.

If within that task, the user decide to remove all the uploaded files and do other modifications required for by the approval task.

Now if the user simply forgets to re-add the newest file, he doesn't get the required value on the upload file button.

He gets the error from the back-end when he submits the form!

I know it is a user mistake but he should be advised before submitting the form!

Is there some Javascript code I can put here to avoid this? Or is this a bug?

Thanks

0 0

SELECTED ANSWER

replied on October 31, 2017 • Show version history

I see, thank you for the clarification. To try to solve the Parsley Validation, maybe we can try below steps:

1. delete all the files from the existing field, in addition to removing the tds inside the tr, you also need to remove the css class of the tr,

$('table.files>tbody>tr').removeClass('file');

Or you can just delete the whole table rows:

$('table.files>tbody>tr').remove();

2. set the file inputs for uploading fields as required, removes the "hasFiles" class for the inputs.

$('input.fileuploader').attr('required', "required");

3. remove the css class from the input:

$('input.fileuploader').removeClass('hasFiles");

To sum up, try:

$(document).ready(function(){
    $('table.files>tbody>tr').remove();
    $('input.fileuploader').attr('required', "required");
    $('input.fileuploader').removeClass('hasFiles");
}

Another option is that you can try to show a loading screen, update the page in the background, and have the delete file clicks trigger occur and when it's done show the form.

1 0

replied on October 31, 2017

Thanks this is exactly what I needed!

0 0

replied on April 18, 2023

Hi, I believe this should supposed to work for classic form designer. Is it possible to do the same in new form designer and how?

0 0

replied on October 25, 2017

In the Form, at least 1 file is required. When the first time I get the form and I don't upload a file I get the following error:

works as expected!

Once the form has been submitted with all the required fields, if this form is presented a second time to do an additional payment, this is where the validation doesn't occur at the presentation layer (on the Form) but it occurs on the back-end?

Thanks

0 1

replied on October 25, 2017

For the second time, when presenting, the required field will show the previous files, so you won't show presentation layout validation error because it satisfies the fact that the field is required and it has a value (the files in your first time submitted).

But you removed the files when trying to save the data, so it complains from the back-end, it should happen after you submit the form with no uploads.

So may I ask, what do you mean when you say the process loops through that seem form? What's the use case here? For example, I'm not sure you are trying to remove previous submission then resubmit to overwrite the previous submission, or just want to initialize a new submission also keep the previous one?

0 0

You are not allowed to follow up in this post.

Question

Question

Clear / Reset a file upload field

Answer

Replies

Sign in to reply to this post.