I want to restrict users to only upload images of certain formats. For this, I want to pass multiple file types in the accept prop of Form.File. I can only find examples with one file type only. Below is my code so far:
<InputGroup >
<Form.Group>
<Form.File
onChange={(e) => setGamePhoto(e.target.files[0])}
label="Upload The End-Game Photo"
accept=".png"
/>
</Form.Group>
</InputGroup>
I want to pass multiple file types like png, jpg, jpeg, web etc
You can insert it in the form of a comma , separated list. Try this:
<InputGroup >
<Form.Group>
<Form.File
onChange={(e) => setGamePhoto(e.target.files[0])}
label="Upload The End-Game Photo"
accept=".png,.jpg,.jpeg,.webp"
/>
</Form.Group>
</InputGroup>
Related
I'm working in an Angular 9 project.
We have a component that takes a file from the user. We're using the documentImport input for this:
<button
*ngIf="showButton"
(click)="documentImport.value = null; documentImport.click()"
class="newDocument-button mat-elevation-z4 float-right"
mat-raised-button
color="primary">
{{ importText }}
</button>
<input
#documentImport
type="file"
id="documentUpload"
name="documentUpload"
(change)="onDocumentSelected($event)"
accept="{{ acceptedFormats }}"
style="display:none;"
/>
You see that I have accept set to a var. That var is: acceptedFormats = [".zip"];
So I would think that only zip files would be allowed. However, it allow for zip and for doc and docx files.
I need to limit the select to only allow zips, no doc/docx.
From the documentation on the documentImport, the above should work, any ideas on how to resolve this?
Thank you for any assistance.
I am working on uploading files to s3 from the website. I get all needed information from my nodejs server which uses aws sdk. The problem I have is that it generates a key which I have to use in my form like this:
<input type="hidden" name="key" value="xxx" /><br />
And it works, but every file I upload has the name of the 'key'. If I change it to sth like this:
<input type="hidden" name="key" value="xxx/name.jpg" /><br />
It gives me an error:
Invalid according to Policy: Policy Condition failed: ["eq", "$key", "xxx"]
Here are my conditions to generate the policy:
Conditions: [
['starts-with', '$key', ''],
["starts-with", "$Content-Type", "image/"],
{"x-amz-server-side-encryption": "AES256"}
]
How can I set the name of the file?
I solved it. The problem was that in parameters object which is passed this function:
s3.createPresignedPost(params, function(err, data)
I had parameter Fields which included key:
Fields: {
key: key,
},
Simply deleting it fixed the problem
So I have a form with a submit button and a hidden field. The hidden field holds the value which will be used to query. When the user presses the submit button, the value is supposed to pass to the controller and the controller is supposed to query and then render a new page with the query result. Here is the code,
#{list items:courses, as:'course'}
<li>
${course.CourseCode}
#{form #Courses.detail()}
<div>
<input type="text" name="Code" value = ${course.CourseCode} />
</div>
<div>
<input type="submit" value="Course Detail" />
</div>
#{/form}
</li>
<br />
#{/list}
I was having problems with "Course" not found so I changed the hidden field to text. This is where the weird thing starts. I see only half the value of ${course.CourseCode}. For example, if course code = ICCS 101, I see "ICCS 101" in the list but in the text field I see only ICCS. I have no idea why this is happening.
Here is my controller
public static void detail(String Code){
System.out.println(Code);
List<Course> courses = Course.find("byCourseCode", Code).fetch();
int index = courses.size()-1;
if(index>=0){
Course course = courses.get(index) ;
render(course);
}
else{
notfound();
}
}
Edit::It seems like it truncates everything after the first white space.
In your view the value property of your input tag should be between quotes "..." otherwise everything after the first space will get truncated
<input type="text" name="Code" value="${course.CourseCode}" />
I am building a site where users can input text and submit the text so that it can be saved and accessed as a file on the server. Unfortunately, I am not quite sure how I would take the inputted text and save it aas a file.
Could anyone point me in the right direction as to how I might do this or detail the steps I will have to take? Preemptive apologizes if I have missed an obvious Google result. Being somewhat new to Django, I may have inadvertently glossed over helpful resources.
Here is the relevant HTML, mostly a form copied from a file upload form:
<form name="myWebForm" id="submissionCode_codeEditor" action="uploadFile/" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
<input type="text" name="title" placeholder="File Name"/>
<input type="hidden" name="taskID" value={{ taskID }} />
<input type="submit" value="Submit This Code" />
</form>
Here is the relevant Django model:
class Upload(models.Model):
title = models.CharField(max_length=50)
fileUpload = models.FileField(upload_to='file_uploads')
userID = models.ForeignKey(User)
task = models.ForeignKey(Task)
uploadTime = models.DateTimeField(auto_now_add=True)
def __unicode__(self):
return self.title
You're looking for ContentFile. It's a Django File subclass that instantiates with a string of text instead of a literal file. You can then save the ContentFile to your FileField.
from django.core.files.base import ContentFile
content = ContentFile(some_text)
upload_instance.fileUpload.save('/path/to/where/file/should/save.txt', content)
upload_instance.save()
First of all create a file in your media folder using command, i am assuming user posted text with name content
from app.models import Upload
from django.conf import settings
content = request.GET("content")
file_object = open("%s/%s"%(settings.MEDIA_ROOT, filename),w) #Take file name as hash of content posted and username so that no class
upload = Upload(title=title, fileUpload=filename,user_id=request.user.id)
Your file is uploaded and can be acceseed using MEDIA_URL from settings
I'm trying to have some html like this:
<input name="list_item[0][name]" />
<input name="list_item[1][name]" />
<input name="list_item[2][name]" />
When I view the raw source of my document, I see these correctly. But when I do inspect element in chrome or firefox, the numbers are incrementing by one! So I see:
<input name="list_item[1][name]" />
<input name="list_item[2][name]" />
<input name="list_item[3][name]" />
And when I inspect the submitted data, the keys start at 1, not 0 which is causing my code to misbehave:
'list_item' =>
array
1 =>
array
'name' => string 'title 1' (length=7)
2 =>
array
'name' => string 'title 2' (length=7)
3 =>
array
'name' => string '' (length=0)
Why is this happening? O_o
I don't know what exactly caused that, but seems like it was some js ;-)