Develop Reference

how to use |safe in Rich Text Field with django to json

how to use |safe in Rich Text Field with django to json
enter image description here
enter image description here
**models
**```
class Question(models.Model):
course = models.ForeignKey(Course, on_delete=models.CASCADE)
# image = models.FileField(upload_to = "files/images", blank=True, null=True)
# question = models.CharField(max_length=500)
question= RichTextField()
answer = models.IntegerField()
option_one = models.CharField(max_length=500)
option_two = models.CharField(max_length=500)
option_three = models.CharField(max_length=500 , blank=True)
option_four = models.CharField(max_length=500 , blank=True)
is_preview = models.BooleanField(default = False)
marks = models.IntegerField(default=1)
def __str__(self):
return self.question
def get_questions(self):
questions = list(self.raw_questions.all())
random.shuffle(questions)
return questions[:self.number_of_questions]
class Meta:
verbose_name_plural = 'Quizes'
views
def api_question(request , id):
raw_questions = Question.objects.filter(course =id ,is_preview=True)
questions = []
for raw_question in raw_questions:
question = {}
question['id'] = raw_question.id
question['question']= raw_question.question
# question['image'] = raw_question.question
question['answer'] = raw_question.answer
question['marks'] = raw_question.marks
options = []
options.append(raw_question.option_one)
options.append(raw_question.option_two)
# options.append(raw_question.image)
if raw_question.option_three != '':
options.append(raw_question.option_three)
if raw_question.option_four != '':
options.append(raw_question.option_four)
question['options'] = options
questions.append(question)
random.shuffle(questions)
def take_quiz(request , id):
Active = Course.objects.all()
context = {'id' : id,'active':Active}
return render(request , 'quiz2.html' , context)
>! html
<form #submit.prevent="handleSubmit()"'>
** [[index + 1 ]].[[ question.question|safe ]]
**
<br>
<div v-for="(option , i) in question.options" style="font-size:18px;"> [[option]]</h4>
<p style="text-align: left; color: var(--primary-color);">Prof. AboRashad<br></p>
<!--<h5 style="text-align: right; color: var(--primary-color);">created by : AboRashad<br></h5>-->
<!--<h2 style="text-align: center; color: #5bc1ac54;">created by : AboRashad<br></h2>-->
<p :id="'show_message-'+question.id" ></p>
<!--<h3 style="text-align: right; color:#5bc1ac54;">created by : AboRashad<br></h3>-->
</div><br>
</div> <button class="btn btn-danger" type="submit" style='width: 100%'>Send</button>
</form>
<br><br><br><br><br><br>
</div>
var app = new Vue({
delimiters: ['[[', ']]'],
el: '#app',
data: {
message: 'Hello Vue!',
course_id: '{{id}}',
questions: [],
solutions: []
},
methods: {
greet: function (name) {
console.log('Hello from ' + name + '!')
},
check(question_index, option_index, id) {
var question = this.questions[question_index]
var element = document.getElementById(`show_message-${id}`)
// if((option_index + 1).toString()==question.answer){
// element.classList="text-success mt-3"
// element.innerHTML ="Right Answer "
// }else{
// element.classList="text-danger mt-3"
// element.innerHTML ="weong Answer "
// },
var radios = document.querySelectorAll(`#radio-${id}`)
for (var i = 0; i < radios.length; i++) {
radios[i].disabled = true
}
var solution = {
'question_id': id,
'option': option_index + 1
}
this.solutions.push(solution)
},
handleSubmit() {
fetch('/api/check_score', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
data : JSON.stringify(this.solutions),
course_id : this.course_id
})
})
.then(res => res.json())
.then(result => {
console.log(result)
window.location = '/view_score'
})
}
},
mounted() {
fetch(`/api/${this.course_id }`)
.then(res => res.json())
.then(result => {
this.questions = result
})
}
});

Having a sqlalchemy.exc.DataError: (psycopg2.errors.InvalidTextRepresentation) invalid input syntax for type integer: "create"

I kept getting this error each time i try to create a todo list from the todo app i just developed:
DataError
sqlalchemy.exc.DataError: (psycopg2.errors.InvalidTextRepresentation) invalid input syntax for type integer: "create"
LINE 3: WHERE todolists.id = 'create'
^
[SQL: SELECT todolists.id AS todolists_id, todolists.name AS todolists_name
FROM todolists
WHERE todolists.id = %(pk_1)s]
[parameters: {'pk_1': 'create'}]
(Background on this error at: https://sqlalche.me/e/14/9h9h)
here is my code: index.html
<body>
<div class="lists-wrapper">
<h4>Lists Items</h4>
<form action="/lists/create" method="POST" id="list-form">
<label for="todolists">Create List: </label><br>
<input type="text" name="name" id="name" data-id="{{active_list.id}}" placeholder="Create list">
<button type="submit" >Create</button>
</form>
<ul id="lists">
{% for list in lists %}
<li>
<input type="checkbox" id="complete" class="list-check-completed" data-id="{{list.id}}">
{{list.name}}
<button class="delete-list" data-id="{{list.id}}">&cross;</button>
</li>
{% endfor %}
</ul>
</div>
<div class="todos-wrapper">
<h4>Todo Items</h4>
<form action="/todos/create" method="POST" id="todo-form">
<input type="hidden" id="list_id" value="{{active_list.id}}">
<label for="description">Create Task</label><br>
<input type="text" name="description" id="description" placeholder="Create todos">
<input type="submit" value="Create">
</form>
<!-- <h5>{{active_list.name}}</h5> -->
<div id="error" class="hidden">Something went wrong!</div>
<ul id="todos">
{% for todo in todos %}
<li>
<input type="checkbox" data-id="todo.id" class="todo-check-completed" name="complete" id="complete" {% if todo.completed %} checked {% endif %}>
{{todo.description}}
<button class="delete-todo" data-id="{{todo.id}}" >&cross;</button>
</li>
{% endfor %}
</ul>
</div>
<script>
const listcheckboxes = document.querySelectorAll('.list-check-completed');
for(let i = 0; i < listcheckboxes.length; i++) {
const checkbox = listcheckboxes[i];
checkbox.onchange = function() {
if(e.target.checked){
const listId = e.target.dataset['id'];
fetch('/lists/' + listId + '/set-completed', {
method: 'POST',
headers: {
'Content-Type' : 'application.json'
}
})
.then(function(jsonResponse) {
document.getElementById('error').className = 'hidden'
const todocheckboxes = document.querySelectorAll('.todo-check-completed');
for(let i = 0; i < todocheckboxes.length; i++) {
const checkbox = todocheckboxes[i];
checkbox.checked = true;
}
})
.catch(function(){
document.getElementById('error').className = '';
})
}
}
}
const deleteListbtns = document.querySelectorAll('.delete-list');
for(let i = 0; i < deleteListbtns.length; i++) {
const btn = deleteListbtns[i];
btn.onclick = function (e) {
const listId = e.target.dataset['id'];
console.log('Delete event:', e);
fetch('/lists' + listId + '/delete-list', {
method: 'DELETE',
}).then(function() {
console.log('Parent?', e.target);
const item = e.target.parentElement;
item.remove();
document.getElementById('error').className = 'hidden';
window.location.reload() = true;
}).catch(function() {
document.getElementById('error').className = '';
})
}
}
document.getElementById('list-form').onsubmit = function (e) {
e.preventDefault();
fetch('/lists/create', {
method: 'POST',
body: JSON.stringify({
'name': document.getElementById('name').value,
}),
headers: {
'Content-Type':'application.json'
}
})
.then(function(response){
return response.json()
})
.then(function(jsonResponse){
const listItem = document.createElement('li');
listItem.innerHTML = jsonResponse['name'];
document.getElementById('lists').appendChild(listItem);
document.getElementById('error').className = 'hidden';
window.location.reload(true);
})
.catch(function() {
document.getElementById('error').className = '';
})
}
const todocheckboxes = document.querySelectorAll('.todo-check-completed');
for(let i = 0; i < todocheckboxes.length; i++){
const todocheckbox = todocheckboxes[i];
todocheckbox.onchange = function (e) {
console.log('checked: ', e)
const todoId = e.target.dataset['id'];
const newCompleted = e.target.checked;
fetch('/todos/' + todoId + '/set-completed', {
method: 'POST',
body: JSON.stringify({
'completed': newCompleted,
}),
headers: {
'Content-Type':'application/json'
}
})
.then(function(jsonResponse) {
document.getElementById('error').className = 'hidden';
})
.catch(function() {
document.getElementById('error').className = ' ';
})
}
}
const deletetodoBtns = document.querySelectorAll('.delete-todo');
for(let i = 0; i < deletetodoBtns.length; i++) {
const deletetodoBtn = deletetodoBtns[i];
deletetodoBtn.onclick = function (e) {
const todoId = e.target.dataset['id'];
fetch('/todos/' + todoId + '/delete-todos', {
method:'DELETE'
})
.then(function(e) {
document.getElementById('error').className = 'hidden';
const item = e.target.parentElement;
item.remove();
window.location.reload() = True;
})
.catch(function() {
document.getElementById('error').className = ' ';
})
}
}
document.getElementById('todo-form').onsubmit = function (e) {
e.preventDefault();
fetch('/todos/create', {
method: 'POST',
body: JSON.stringify({
'description': document.getElementById('description').value,
'list_id': document.getElementById('list_id').value
}),
headers: {
'Content-Type':'application.json'
}
})
.then(function(response) {
return response.json()
})
.then(function(jsonResponse) {
const listItem = document.createElement('li');
listItem.innerHTML = jsonResponse.description;
document.getElementById('todos').appendChild(listItem);
document.getElementById('error').className = 'hidden';
window.location.reload(true);
})
.catch(function() {
document.getElementById('error').className = '';
})
}
</script>
</body>
</html>
while the app.py
from flask import Flask, jsonify, render_template, abort, url_for, redirect
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
import sys
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://postgres:postgres#localhost:5432/todoapp_gig'
app.config['SQLALCHEMY_TRACK_MODIFICATION'] = False
db = SQLAlchemy(app)
migrate = Migrate(app, db)
class TodoList(db.Model):
__tablename__ = 'todolists'
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(), nullable=False)
todos = db.relationship('Todo', backref='list', lazy=True)
def __repr__(self):
return f'<TodoList ID: {self.id} name: {self.name} todos: {self.todos}>'
class Todo(db.Model):
__tablename__ = 'todos'
id = db.Column(db.Integer, primary_key = True)
description = db.Column(db.String(), nullable = False)
complete = db.Column(db.Boolean, nullable=False, default=False)
list_id = db.Column(db.Integer, db.ForeignKey('todolists.id'), nullable=False)
def __repr__(self):
return f'<Todo ID: {self.id} description: {self.description} complete: {self.complete}>'
#app.route('/lists/<list_id>/set-completed', methods = ['POST'])
def set_completed_list(list_id):
error = false
try:
list = Todo.query.get(list_id);
for todo in list.todos:
todo.completed = True
db.session.commit()
except:
db.session.rollback()
error = True
finally:
db.session.close()
if error:
abort(400)
else:
return ' ', 200
#app.route('/lists/<list_id>/delete-list', methods = ['POST'])
def delete_list(list_id):
error = False
try:
list = Todo.query.get(list_id);
for todo in list.todos:
db.session.delete(todo)
db.session.delete(list)
de.session.commit()
except:
db.session.rollback()
error = True
finally:
db.session.close()
if error:
abort(500)
else:
return jsonify({
'success': True
})
#app.route('/lists/create', methods = ['POST'])
def create_list():
error: False
body = {}
try:
name = request.get_json()['name']
todolist = TodoList(name=name)
db.session.add(todolist)
db.session.commit()
body['id'] = todolist.id
body['name'] = todolist.name
except:
db.session.rollback()
error = True
finally:
db.session.close()
if error:
abort(400)
else:
return jsonify(body)
#app.route('/todos/<todo_id>/set-completed', methods = ['POST'])
def set_completed_todos(todo_id):
error: False
try:
todo = Todo.query.get(todo_id)
completed = request.get_json()['completed']
todo.completed = completed
db.session.commit()
except:
db.session.rollback()
error = True
finally:
db.session.close()
if error:
abort(400)
else:
return ' ', 200
#app.route('/todos/<todo_id>/delete-todos', methods = ['POST'])
def delete_todos(todo_id):
error = False
try:
# todo = Todo.query.filter_by(id=todo.id).delete()
todo = Todo.query.get(todo_id)
db.session.delete(todo)
db.session.commit()
except:
db.session.rollback()
error = True
finally:
db.session.close()
if error:
abort(400)
else:
return jsonify({'success': True})
#app.route('/todos/create', methods=['POST'])
def create_todo():
error = False
body={}
try:
description = request.get_json()['description']
list_id = request.get_json()['list_id']
todo = Todo(description = description, completed = False, list_id = list_id)
db.session.add(todo)
db.session.commit()
body['id'] = todo.id
body['complete'] = todo.complete
body['description'] = todo.description
except:
db.session.rollback()
error = True
print(sys.exc_info)
finally:
db.session.close()
if error:
abort(400)
else:
return jsonify(body)
#app.route('/lists/<list_id>')
def get_list_todos(list_id):
lists = TodoList.query.all()
active_list = TodoList.query.get(list_id)
todos = Todo.query.filter_by(list_id=list_id).order_by('id').all()
return render_template('index.html', lists=lists, active_list=active_list, todos=todos)
#app.route('/')
def index():
return redirect(url_for('get_list_todos',))
if __name__ == "__main__":
app.run(host = '0.0.0.0', port = 5000)
Please what am i doing wrong!!! the error keep pointing at this very code:
active_list = TodoList.query.get(list_id)
I tried to create a todolist after rendering my code, but instead it gave me a datatype error of which i cant figure how to correct it.
I don't know what's triggering the error.

React Component not Refreshing Django REST

everyone !
I'm learning React by myself, and I'm stuck here where I'm doing a REST API for a Chat APP, when I POST a new message, the component don't refresh by itself, I have to refresh the page.
I managed to refresh it putting the idmessage and vmessage in the useEffect array, but it kept hitting the API, and I'm pretty sure this wasn't supposed to happen.
There may be a lot of wrong code here and a lot of different ways to do a better project, so I'm sorry if it's bad written.
P.S: Everything is mocked for the first and second contact
My MessagePage:
const MessagesPage = () => {
let [idmessage, setIdmessage] = useState([])
let [vmessage, setVmessage] = useState([])
useEffect(() => {
getIdMessage()
getVMessage()
}, [])
let url = 'http://127.0.0.1:8000'
let getIdMessage = async () => {
let response = await fetch(`${url}/api/messages/1/2/`)
let data = await response.json()
setIdmessage(data)
}
let getIdName = (idmessage) => {
return idmessage.map((m) => (
m.contact.name
))
}
let getVName = (vmessage) => {
return vmessage.map((m) => (
m.contact.name
))
}
let getVMessage = async () => {
let response = await fetch(`${url}/api/messages/2/1/`)
let data = await response.json()
setVmessage(data)
}
const messages = idmessage.concat(vmessage).sort((a,b) => {
return a.time.localeCompare(b.time);
}) // This is the way I found to make it like a real chat and not two different groups in a chat
return (
<>
<MessageHeader/>
<div className="card bg-dark card-body messages">
{messages.map((m, index) => (
m.contact.name === getIdName(idmessage)[0] ?
<MessageDetail messages={m} key={index} c={1}/>
: m.contact.name === getVName(vmessage)[0] ?
<MessageDetail messages={m} key={index} c={2}/>
: null
))
}
<SendMessage/>
</div>
</>
)
}
export default MessagesPage
Then my SendMessage Component:
const SendMessage = () => {
let [text, setText] = useState('')
let url = 'http://127.0.0.1:8000'
const handleChange = (e) =>{
setText(e.target.value)
}
const handleSubmit = (e) => {
e.preventDefault()
sendText()
setText('')
}
let sendText = async () => {
fetch(`${url}/api/messages/1/2/`, {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"text": (text),
"contact": 1,
"other_contact": 2,
"state": false
})
})
}
return (
<div className="w-100 card-footer border bg-light textWrite">
<form className='m-0 p-0' onSubmit={handleSubmit} method="POST" autoComplete='off'>
<div className="row m-0 p-0">
<div className="col-11 m-0 p-1">
<input id="text" onChange={handleChange} className="mw-100 border rounded form-control" type="text" name="text" title="Send a Message" placeholder="Send a Message..." value={text} required/>
</div>
<div className="col-1 m-0 p-1">
<button id='sendText' className="btn btn-outline-secondary rounded border w-100" type='submit'><BsChatDots/></button>
</div>
</div>
</form>
</div>
)
}
export default SendMessage
The Serializer:
#api_view(['GET', 'POST'])
def detailMessages(request, pk, o_pk):
message = Message.objects.filter(contact=pk, other_contact=o_pk)
serializer = MessageSerial(message, many=True)
if request.method == 'GET':
return Response(serializer.data)
if request.method == 'POST':
data = request.data
contact = Contact.objects.get(id=data['contact'])
other_contact = Contact.objects.get(id=data['other_contact'])
message = Message.objects.create(
contact=contact,
other_contact=other_contact,
text=data['text'],
state=data['state']
)
serializer = MessageSerial(message, many=False)
return Response(serializer.data)

If you want to make real time messages system without hitting the database each time, you should read about WebSocket in a simple word it is opening pool connection between multiple devices to send and receive data without closing the connection after send for example like http request and this data will always pass throw this connection(channel) without reloading or database hitting, you should read more about it to better understanding.
And if you want to use it in your project you can search about: react websocket and Django Channels
Best of luck

Theme Choosing Option for a Django Project not working properly

Helloo,
I am following a tutorial to allow User to select Light/Dark Mode using HTML, CSS, JS.
I have following documentation and tutorial but the issue is that the content of the page itself is not showing and I am not sure the reason.
So what I did is I created 2 css files dark and light, and create a mode application with the settings.
I am currently receiving an error:
django.contrib.auth.models.User.setting.RelatedObjectDoesNotExist: User has no setting.
To start here is the base.html
<link id="mystylesheet" href="{% static 'css/app-light.css' %}" type="text/css" rel="stylesheet">
<!-- Mode -->
<div id="mode" class="section" style="padding-top: 1rem; padding-bottom: 3rem;text-align: right">
<button onclick="swapStyle('css/app-light.css')" type="button" class="btn btn-secondary">Light Mode</button>
<button onclick="swapStyle('css/app-dark.css')" type="button" class="btn btn-dark">Dark Mode</button>
</div>
<!-- Mode -->
<script type="text/javascript">
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
var cssFile = "{% static 'css' %}"
function swapStyles(sheet){
document.getElementById('mystylesheet').href = cssFile + '/' + sheet
localStorage.setItem('theme', sheet)
updateTheme(sheet)
}
function loadSettings(){
//Call data and set local storage
var url = "{% url 'mode:user_settings' %}"
fetch(url, {
method:'GET',
headers:{
'Content-type':'application/json'
}
})
.then((response) => response.json())
.then(function(data){
console.log('Data:', data)
var theme = data.value;
if (theme == 'light.css' || null){
swapStyles('light.css')
}else if(theme == 'dark.css'){
swapStyles('dark.css')
}
})
}
loadSettings()
function updateTheme(theme){
var url = "{% url 'mode:update_theme' %}"
fetch(url, {
method:'POST',
headers:{
'Content-type':'application/json',
'X-CSRFToken':csrftoken,
},
body:JSON.stringify({'theme':theme})
})
}
</script>
Here is the model.py
class Setting(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)
name = models.CharField(max_length=200)
value = models.CharField(max_length=200)
def __str__(self):
return self.name
here is the views.py
def index(request):
return render(request, 'base.html')
def userSettings(request):
user, created = User.objects.get_or_create(id=1)
setting = user.setting
seralizer = UserSerailizer(setting, many=False)
return JsonResponse(seralizer.data, safe=False)
def updateTheme(request):
data = json.loads(request.body)
theme = data['theme']
user, created = User.objects.get_or_create(id=1)
user.setting.value = theme
user.setting.save()
print('Request:', theme)
return JsonResponse('Updated..', safe=False)
Here is the serializer.py
from .models import *
class UserSerailizer(serializers.ModelSerializer):
class Meta:
model = Setting
fields = '__all__'
Here is urls.py
app_name = 'mode'
urlpatterns = [
path('', views.index, name="index"),
path('user_settings/', views.userSettings, name="user_settings"),
path('update_theme/', views.updateTheme, name="update_theme"),
]
Here is the traceback
Traceback (most recent call last):
File "C:\Users\Ahmed\Desktop\Project\venv\lib\site-packages\django\core\handlers\exception.py", line 47, in inner
response = get_response(request)
File "C:\Users\Ahmed\Desktop\Project\venv\lib\site-packages\django\core\handlers\base.py", line 179, in _get_response
response = wrapped_callback(request, *callback_args, **callback_kwargs)
File "C:\Users\Ahmed\Desktop\Project\mode\views.py", line 17, in userSettings
setting = user.setting
File "C:\Users\Ahmed\Desktop\Project\venv\lib\site-packages\django\db\models\fields\related_descriptors.py", line 421, in __get__
raise self.RelatedObjectDoesNotExist(
django.contrib.auth.models.User.setting.RelatedObjectDoesNotExist: User has no setting.

You need to handle the case when a user will not have a setting in userSettings function.
def userSettings(request):
user, created = User.objects.get_or_create(id=1)
setting = getattr(user, 'setting', None)
if setting:
seralizer = UserSerailizer(setting, many=False)
return JsonResponse(seralizer.data, safe=False)
else:
return JsonResponse({'message': "User don't have a setting."}, safe=False)
And also make sure that updateTheme function works perfectly. If it doesn't work try following.
def updateTheme(request):
data = json.loads(request.body)
theme = data['theme']
user, created = User.objects.get_or_create(id=1)
setting = Setting.objects.get_or_create(user=user, value=theme, name='a name')
setting.save()
print('Request:', theme)
return JsonResponse('Updated..', safe=False)
Note that in the name field of Setting model you didn't pass null=True. So you have to pass name when creating a setting of a user.
Also in your base.html you are using onclick="swapStyle()" yet your javascript function is function swapStyles(){}. Change this

setting = getattr(user, 'setting', None)

Multiple image at once on Django Rest Framework

I have been trying to upload multiple images at once but my API takes only one image among the list of images. What might be the reason for not taking all the images ? What have i done wrong?
Here's my code.
urls.py
url(r'^api/', RentalList.as_view()),
url(r'^api/upload/', FileUploadView.as_view()),
url(r'^api/(?P<pk>[0-9]+)/$', RentalDetail.as_view()),
Models.py
class Rental(models.Model):
email = models.CharField(max_length=120,blank=True, null=True)
phoneNumber = models.PositiveIntegerField(blank=False,null=True,
help_text=_("Phone number of contact person"))
listingName = models.CharField(_("Lisitng Name"), max_length=255, blank=False, null=True,
help_text=_("Title of the rental space"))
summary = models.TextField(max_length=500, blank=True, null= True,
help_text=_("Description of the rental space"))
property = models.CharField(_("Property type"),max_length=10,null=True)
price = models.PositiveIntegerField(blank=False,null=True,
help_text=_("Rental price of the space per month"))
city = models.CharField(_("City"), max_length=255, blank=False, null=True,
help_text=_("City of the rental space"))
place = models.CharField(_("Place"), max_length=255, blank=False, null=True,
help_text=_("Place of the rental space"))
phone_image = models.CharField(max_length=2048,blank=True,null=True,
help_text=_("image form of the phone number"))
image = models.FileField(upload_to='upload/',null=True,blank=True)
Views.py
class RentalList(generics.ListCreateAPIView):
serializer_class = RentalSerializer
queryset = Rental.objects.all()
def get(self,request,format=None):
rental = self.get_queryset()
serializer_rental = RentalSerializer(rental,many=True)
return Response(serializer_rental.data)
#permission_classes((IsAdminUser, ))
def post(self,request,format=None):
user=request.user
serializer_rental = RentalSerializer(data=request.data,context={'user':user})
if serializer_rental.is_valid():
serializer_rental.save()
return Response(serializer_rental.data,status=status.HTTP_201_CREATED)
return Response(serializer_rental.errors,status=status.HTTP_400_BAD_REQUEST)
class RentalDetail(generics.RetrieveUpdateDestroyAPIView):
queryset=Rental.objects.all()
serializer_class = RentalSerializer
class FileUploadView(APIView):
parser_classes = (MultiPartParser, FormParser, )
def post(self, request, format=None):
uploaded_file = request.FILES['image']
print('up_file is',uploaded_file)
filename = '/media/upload'
with open(filename, 'wb+') as destination:
for chunk in uploaded_file.chunks():
print('chunk',chunk)
destination.write(chunk)
destination.close()
my_saved_file = open(filename)
return Response(uploaded_file.name, status.HTTP_201_CREATED)
registration.jsx
var RenderPhotos = React.createClass({
getInitialState: function () {
return {
files:[]
};
},
onDrop(files) {
console.log('Received files: ', files);
this.setState({
files: files
});
},
showFiles() {
const files = this.state.files || null;
console.log('files',files);
if (!files.length) {
return null;
}
return (
<div>
<h3>Dropped files: </h3>
<ul className="gallery">
{
files.map((file, idx) => {
return (
<li className="col-md-3" key={idx}>
<img src={file.preview} width={100}/>
<div>{file.name}</div>
</li>
);
})
}
</ul>
</div>
);
},
render: function () {
return (
<div>
<h3>Photos can bring your space to life</h3>
<p>Add photos of spaces to give more insight of your space </p>
<hr/>
<div className="col-md-12">
<form method="post" encType="multipart/form-data">
<Dropzone onDrop={this.onDrop}
style={style}
activeStyle={activeStyle}>
Try dropping some files here, or click to select files to upload.
</Dropzone>
</form>
{this.showFiles()}
</div>
<div className="row continueBtn text-right">
<button className="btn how-it-works pull-left" onClick={this.props.previousStep}>Back</button>
<button className="btn how-it-works" onClick={this.submitRent}>Submit</button>
</div>
</div>
);
},
submitRent: function(e) {
// want to store the data so that when user reverts back to this form the data should be in same previous state
var req = request.post('http://localhost:8000/api/upload/');
var image = [];
image = new FormData();
var that = this;
var index;
for (index = 0; index < that.state.files.length; ++index) {
console.log(that.state.files[index]);
image.append('image',that.state.files[index]);
}
req.send(image);
console.log('req is',req);
req.end((err, res) => {
if (err) {
console.log('error', err);
} else {
console.log('success', res);
}
});
}
});
I have posted all the code thinking that it might be easy for tracing the errors.
Do i need to create ManyToMany field for image?